自從喬幫主提出retina屏以來。可練就了不少前端兄弟的畫素眼，有強迫症的夥伴們日子可就煎熬了。為了畫出真正的1畫素邊框，前端猿們也是受盡各瀏覽器的虐待了。
關於什麼是移動端1畫素邊框問題，先上兩張圖，大家就明白了。
圖1
圖2
實現1px邊框的方法有很多，各有優缺點，比如通過背景實現、通過transform: scale(0.5)實現。本次實現的是通過viewport+rem實現的，優點是可以自適應已知的各類手機螢幕,且不存在其它方法存在的變顏色困難、圓角陰影失效問題。缺點嘛，這方法適全新專案，如果老專案想用這種方法，改動量估計會比較大。
//下面是根據裝置畫素設定viewport
if(window.devicepixelratio ==1
)
if(window.devicepixelratio ==2
)
if(window.devicepixelratio ==3
)
vardocel
=document.documentelement;
varfontsize =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
>
想看效果的，直接將**複製下來放伺服器，用手機瀏覽就可以看到效果了。
移動端h5開發基礎
移動端h5開發基礎知識 一.手機端開發頁面必須要加一段 注 這段 的主要意思是 讓頁面寬度等於裝置寬度，縮放比例為1，禁止使用者縮放。用於檢測視口，主要的效果就是取消下面的滾動條，讓頁面適應螢幕。二.為自己的頁面設定最大寬度和最小寬度 主要作用是在螢幕足夠大的時候，頁面也不會失真。三.相容手機螢幕大...
移動端1畫素邊框
通常我們會有偽類和定位來解決1畫素的問題，但是使用偽類也是有問題的，但是你可以換一種方式實現1畫素邊框的問題，box shadow 1.實現下邊框 box shadow inset 0 1px 0 0 000 2.實現右邊框 box shadow inset 1px 0 0 0 000 3.實現左邊...
h5移動端css開發總結
font size 12px transform scale 10 12 需要注意這個方式雖然縮小了字型，但該文字元素所佔據的原寬高大小並不會跟著縮小，所以很多時候還需要考慮文字位置和間距的問題。一般文字位置需要結合 transform origin 屬性來設定。例如設定文字水平居左 垂直居中 tr...