為什么移動(dòng)端css里面寫(xiě)了1px, 實(shí)際看起來(lái)比1px粗. 其實(shí)原因很好理解:這2個(gè)’px’的含義是不一樣的. 移動(dòng)端html的header總會(huì)有一句
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
這句話定義了本頁(yè)面的viewport的寬度為設(shè)備寬度,初始縮放值和最大縮放值都為1,并禁止了用戶縮放. viewport通俗的講是瀏覽器上可用來(lái)顯示頁(yè)面的區(qū)域, 這個(gè)區(qū)域是可能比屏幕大的
關(guān)于1px問(wèn)題
1、0.5px邊框
在2014年的 WWDC称杨，“設(shè)計(jì)響應(yīng)的Web體驗(yàn)” 一講中钱磅，Ted O’Connor 講到關(guān)于“retina
hairlines”（retina 極細(xì)的線）：在retina屏上僅僅顯示1物理像素的邊框耻台，開(kāi)發(fā)者應(yīng)該如何處理呢徙歼。
他們?cè)榻B到 iOS 8 和 OS X Yosemite 即將支持 0.5px 的邊框：?jiǎn)栴}是 retina 屏的瀏覽器可能不認(rèn)識(shí)0.5px的邊框，將會(huì)把它解釋成0px苍息，沒(méi)有邊框疾渴。包括 iOS 7 和之前版本，OS X Mavericks 及以前版本髓堪，還有 Android 設(shè)備送朱。
解決方法
解決方案1是通過(guò) JavaScript 檢測(cè)瀏覽器能否處理0.5px的邊框，如果可以干旁，給html標(biāo)簽元素添加個(gè)class驶沼。
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement('div');
testElem.style.border = '.5px solid transparent';
document.body.appendChild(testElem); }
if (testElem.offsetHeight == 1) {
document.querySelector('html').classList.add('hairlines'); }
document.body.removeChild(testElem); }
div {
border: 1px solid #bbb;
}
.hairlines div {
border-width: 0.5px;
}
解決方法2利用css中的transform的縮放屬性解決 推薦使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解決1px邊框問(wèn)題</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<style>
.line {position:relative;}
.line:after {width:200%;height:200%;position:absolute;top:0;left:0;z-index:0;content:"";-webkit-transform:scale(0.5);-webkit-transform-origin:0 0;transform:scale(0.5);transform-origin:0 0;box-sizing:border-box;}
.list {width:100%;margin:auto;list-style:none;padding:0;}
.list:after {border:1px solid #ccc;border-radius:10px;}
.item {padding:10px;}
.item:after {border-bottom:1px solid #ccc;}
.item:last-child:after {display:none;}
</style>
</head>
<body>
<ul class="list line">
<li class="item line">item001</li>
<li class="item line">item002</li>
<li class="item line">item003</li>
<li class="item line">item004</li>
<li class="item line">item005</li>
<li class="item line">item006</li>
<li class="item line">item007</li>
<li class="item line">item008</li>
<li class="item line">item009</li>
<li class="item line">item010</li>
</ul>
</body>
</html>
這個(gè)主要利用after偽類進(jìn)行縮放汞贸。調(diào)用公共class积仗，還是很方便的。
>解決方案3background-image 通過(guò)設(shè)置一張背景圖
.border {
background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
linear-gradient(270deg, red, red 50%, transparent 50%),
linear-gradient(0deg, red, red 50%, transparent 50%),
linear-gradient(90deg, red, red 50%, transparent 50%);
background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top;
padding: 10px;
}
也能實(shí)現(xiàn) 但過(guò)于麻煩 使用和維護(hù)及其不方便
