自從喬幫主提出retina屏以來。可練就了不少前端兄弟的像素眼，有強迫症的伙伴們日子可就煎熬了。為了畫出真正的1像素邊框，前端猿們也是受盡各瀏覽器的虐待了。
關於什么是移動端1像素邊框問題，先上兩張圖，大家就明白了。
圖1
圖2
實現1PX邊框的方法有很多，各有優缺點，比如通過背景圖片實現、通過transform: scale(0.5)實現。本次實現的是通過VIEWPORT+rem實現的，優點是可以自適應已知的各類手機屏幕,且不存在其它方法存在的變顏色困難、圓角陰影失效問題。缺點嘛，這方法適全新項目，如果老項目想用這種方法，改動量估計會比較大。
<span style="font-size:18px;"><html> <head> <title>1px question</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style> html { font-size: 1px; } * { padding: 0; margin: 0; } .bds_b { border-bottom: 1px solid #ccc; } .a, .b { margin-top: 1rem; padding: 1rem; font-size: 1.4rem; } .a { width: 30rem; } .b { background: #f5f5f5; width: 20rem; } </style> <script> var viewport = document.querySelector("meta[name=viewport]"); //下面是根據設備像素設置viewport if (window.devicePixelRatio == 1) { viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no'); } if (window.devicePixelRatio == 2) { viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no'); } if (window.devicePixelRatio == 3) { viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no'); } var docEl = document.documentElement; var fontsize = 10 * (docEl.clientWidth / 320) + 'px'; docEl.style.fontSize = fontsize; </script> </head> <body> <div class="bds_b a">下面的底邊寬度是虛擬1像素的</div> <div class="b">上面的邊框寬度是虛擬1像素的</div> </body> </html></span>
想看效果的，直接將代碼復制下來放服務器，用手機瀏覽就可以看到效果了。