最近在做一個(gè)移動(dòng)端項(xiàng)目，涉及到1像素問題

其實(shí)質(zhì)就是移動(dòng)端的css里寫1px，看起來比1px粗，這就是物理像素和邏輯像素的區(qū)別。物理像素和邏輯像素之間存在一個(gè)比例關(guān)系，在Javascript中可以用window.devicePixelRatio來獲取，也可以用媒體查詢的-webkit-min-device-pixel-ratio來獲取，具體的比例差距由設(shè)備決定

如何解決這個(gè)問題才是重點(diǎn)，下面集中提出解決方案：

1.媒體查詢利用設(shè)備像素比縮放，設(shè)置小數(shù)像素

css可以寫成這樣： .border{border:1px solid #999}@media screen add(-webkit-min-device-pixel-radio:2) {.border{border 0.5px solid #999}}@media screen add(-webkit-min-device-pixel-radio:3) {.border{border 0.33333px solid #999}}//具體的邊框值按照比例計(jì)算即可

2.使用box-shadow模擬邊框

利用css對陰影處理的方式實(shí)現(xiàn)0.5px的效果 .box{ box-shadow: 0px 1px 1px -1px black;}

復(fù)習(xí)下box-shadow屬性的用法：

box-shadow: h-shadow v-shadow blur spread color inset; 值描述

h-shadow	必需。水平陰影的位置。允許負(fù)值。
v-shadow	必需。垂直陰影的位置。允許負(fù)值。
blur	可選。模糊距離。
spread	可選。陰影的尺寸。
color	可選。陰影的顏色。請參閱 CSS 顏色值。
inset	可選。將外部陰影 (outset) 改為內(nèi)部陰影。

3.利用viewport+rem

同時(shí)設(shè)置對應(yīng)viewport的rem基準(zhǔn)值

在devicePixelRatio=2時(shí)，輸出viewport：

<meta name="viewport" content="initial-scale=0.5 maximum-scale=0.5 minimum-scale=0.5,user-scalable=no>

利用js修改動(dòng)態(tài)修改：

var viewport=document.querySelector("meta[name=viewport")//返回文檔中匹配指定 CSS 選擇器的一個(gè)元素。 if(window.devicePixelRatio==1){viewport.setAttribute('content','width=device-width','initial-scale=1,maximum-scale=1,minimum-scale=1,user-scale=no') } if(window.devicePixelRatio==2){viewport.setAttribute('content','width=device-width','initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scale=no') } if(window.devicePixelRatio==3){viewport.setAttribute('content','width=device-width','initial-scale=0.3333,maximum-scale=0.3333,minimum-scale=0.3333,user-scale=no') } var element=document.documentElement
var fontsize=10*(element.clientWidth/320)+'px';
element.style.fontSize=fontsize

4偽類+transform實(shí)現(xiàn)

先把原先元素的border去掉，然后利用：before或者：after重做border，并transform的scale縮小一半，原先的元素相對定位，新做的border絕對定位

.box{position: relative;border: none;}.box:after{content: '';position: absolute;bottom: 0;left:0background: #000000;width: 100%;height: 1px;-webkit-transform: scaleY(0.5);}

?

轉(zhuǎn)載于:https://www.cnblogs.com/yuan233/p/10328087.html

總結(jié)

以上是生活随笔為你收集整理的移动端的1px边框问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。