資訊專欄INFORMATION COLUMN
摘要：?jiǎn)栴}的產(chǎn)生屏?xí)詡€(gè)乃至個(gè)物理像素來(lái)顯示一個(gè)像素，所以在中指定的邊框?qū)嶋H占據(jù)的卻是個(gè)以上物理像素，在屏用戶體驗(yàn)較差。這其中，的媒體查詢里提供了或而瀏覽器也提供了這個(gè)來(lái)獲取像素和物理像素的比值。
問題的產(chǎn)生
retina屏?xí)?個(gè)（乃至3個(gè)）物理像素來(lái)顯示一個(gè)CSS像素（1px），所以在CSS中指定1px的邊框?qū)嶋H占據(jù)的卻是2個(gè)以上物理像素，在retina屏用戶體驗(yàn)較差。
幾種解決方案（考慮1px=2dip） 使用0.5px問題：只在Firefox and Safari 8+支持，安卓不支持。
使用圖片采用一張圖片作為border：
border-width: 1px;border-image:url(border.gif) 2 repeat;
border-img屬性會(huì)將圖片（如上圖）切為九宮格，放到邊框的四邊和四角。由于圖片外沿一半為實(shí)色、一半為透明，所以1px的圖片邊框，實(shí)際顯示出的就是0.5px的邊框了。
問題：
無(wú)法設(shè)置顏色
邊框?qū)嶋H還是占用了1px的空間
不使用base64的情況下，要加載多一張圖片
使用漸變原理類似上面的圖片，將1px的漸變拆為兩半，一半透明一半實(shí)色，但好處是作為背景不會(huì)實(shí)際占據(jù)盒子的0.5px空間。
background:linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,
linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat,
linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat;
問題：無(wú)法處理圓角
使用縮放給一個(gè)原元素兩倍大小的偽元素，指定1px邊框，再縮小一半，即可得到0.5px邊框。
.retina-border-scale{
position: relative;
}
.retina-border-scale:before{
content:"";
border: 1px solid black;
transform:scale(0.5);
transform-origin: 0 0;
width: 200%;height: 200%;
position: absolute;
left: 0;
top: 0;
}
問題：
原元素需要用相對(duì)定位
使用box-shadow：實(shí)現(xiàn)簡(jiǎn)單，但效果不好、會(huì)有陰影
直接按照放大的設(shè)計(jì)稿重構(gòu)，再指定viewport的initial-scale=0.5縮小整個(gè)頁(yè)面：簡(jiǎn)單粗暴
對(duì)非retina屏的兼容由于非retina屏下的1物理像素border直接用px做單位即可，因此針對(duì)不同屏幕，會(huì)有多套樣式實(shí)現(xiàn)。
而為了正確地應(yīng)用樣式，首先得有判斷retina屏的能力。這其中，CSS的媒體查詢里提供了min-device-pixel-ratio或min-resolution；而瀏覽器也提供了window.devicePixelRatio這個(gè)js API來(lái)獲取CSS像素和物理像素的比值。
最后，我們就可以根據(jù)屏幕在代碼里應(yīng)用適當(dāng)?shù)臉邮搅恕?/p>
ref
CSS, Retina, and Physical Pixels
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112748.html
摘要：再談移動(dòng)端適配百分比解決方案的缺點(diǎn)在我們的項(xiàng)目中大量的使用百分比來(lái)解決頁(yè)面在寬度上的自適應(yīng)，其實(shí)在高度上并沒有很好的自適應(yīng)。 前言 這篇文章的內(nèi)容如題目一樣，主要分為兩個(gè)部分， 談?wù)剺I(yè)內(nèi)主流的移動(dòng)端適配解決方案 點(diǎn)5像素的由來(lái)和實(shí)現(xiàn)方法 建議在讀這篇文章的時(shí)候先讀下這篇文章《高清屏概念解析與檢測(cè)設(shè)備像素比的方法_20161005》，因?yàn)檫@些文章涉及的很多概念在這篇文章中都會(huì)提到。 ...
摘要：高清屏概念解析和前端開發(fā)的關(guān)系高清屏概念解析高清屏概念的興起主要是從喬幫主發(fā)布設(shè)備開始興起。還好我們有一個(gè)叫設(shè)備像素比的東西來(lái)檢測(cè)當(dāng)前屏幕是不是屬于高清屏幕。 前言 做移動(dòng)端h5開發(fā)很久了，從開始入行到現(xiàn)在。很多知識(shí)和工具都是在用前輩留下的遺產(chǎn)，都沒有深入的研究過(guò)原因，了解為什么要這么去做。 也許自己也是過(guò)了交給自己做什么就做什么的階段了。在國(guó)慶節(jié)有一個(gè)大塊的時(shí)間，把最近看到的知識(shí)總結(jié)...
摘要：同時(shí)，由于本身的實(shí)現(xiàn)大部分是純函數(shù)，因此在版本中，一些不含副作用的均在中暴露了以為前綴的函數(shù)方法，也可以直接導(dǎo)入使用。在瀏覽器中神秘丟失嘗試檢查被請(qǐng)求的是否存在尾部斜線，具體原因暫時(shí)沒有找到相關(guān)資料。 寫在前面 最近沒怎么寫新的東西，一是因?yàn)橐恢痹跍?zhǔn)備換新的工作，所以一直在準(zhǔn)備面試，二是因?yàn)檫^(guò)年，心靜不下來(lái)，所以也無(wú)法輸出或者翻譯一些文章，三是由于手頭還有一些遺留工作需要完成和交接，比...
閱讀 1995·2021-11-22 19:20
閱讀 2640·2021-11-22 13:54
閱讀 1967·2021-09-04 16:40
閱讀 1825·2021-08-13 11:54
閱讀 2668·2019-08-30 15:55
閱讀 3468·2019-08-29 13:51
閱讀 530·2019-08-29 11:09
閱讀 3010·2019-08-26 14:06
