為什么移動端css里面寫了1px, 實際看起來比1px粗. 其實原因很好理解:這2個’px’的含義是不一樣的. 移動端html的header總會有一句
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
這句話定義了本頁面的viewport的寬度為設備寬度,初始縮放值和最大縮放值都為1,并禁止了用戶縮放. viewport通俗的講是瀏覽器上可用來顯示頁面的區(qū)域, 這個區(qū)域是可能比屏幕大的
關于1px問題
1、0.5px邊框
在2014年的 WWDC，“設計響應的Web體驗” 一講中，Ted O’Connor 講到關于“retina
hairlines”（retina 極細的線）：在retina屏上僅僅顯示1物理像素的邊框，開發(fā)者應該如何處理呢。
他們曾介紹到 iOS 8 和 OS X Yosemite 即將支持 0.5px 的邊框：問題是 retina 屏的瀏覽器可能不認識0.5px的邊框，將會把它解釋成0px，沒有邊框。包括 iOS 7 和之前版本，OS X Mavericks 及以前版本，還有 Android 設備。
解決方法
解決方案1是通過 JavaScript 檢測瀏覽器能否處理0.5px的邊框，如果可以，給html標簽元素添加個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邊框問題</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>
這個主要利用after偽類進行縮放。調(diào)用公共class，還是很方便的。
>解決方案3background-image 通過設置一張背景圖
.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;
}
也能實現(xiàn) 但過于麻煩 使用和維護及其不方便
