移動端開發的適配和1px問題

移動端開發適配：

讓前端開發者的**在不同手機螢幕下展示相同的效果：

1.**查詢：

/* 適配 */
@media only screen and (min-width: 320px) 
}@media only screen and (min-width: 360px) 
}@media only screen and (min-width: 375px) } 
@media only screen and (min-width: 400px) 
}@media only screen and (min-width: 412px) 
}@media only screen and (min-width: 414px) } 
@media only screen and (min-width: 480px) 
}@media only screen and (min-width: 768px) 
}

2.js 適配：

移動端開發中1px問題：

iphone6的螢幕寬度為375px，設計師做的視覺稿一般是750px，也就是2x，這個時候設計師在視覺稿上畫了1px的邊框，於是你就寫了「border-width:1px」，so…1px邊框問題產生了。

為什麼移動端css裡面寫了1px, 實際看起來比1px粗. 其實原因很好理解:這2個』px』的含義是不一樣的。viewport的設定和螢幕物理解析度是按比例而不是相同的. 移動端window物件有個devicepixelratio屬性, 它表示裝置物理畫素和css畫素的比例, 在retina屏的iphone手機上, 這個值為2或3, css裡寫的1px長度對映到物理畫素上就有2px或3px那麼長。

解決方案：

1.用小數寫邊框：**查詢，加小數的寫法

缺點: 安卓與低版本ios不適用

.border 
@media screen and (-webkit-min-device-pixel-ratio: 2) 
}@media screen and (-webkit-min-device-pixel-ratio: 3) 
}

2.box-shadow利用陰影來模擬邊框：

.border-1px

3.border-image

使用將的「border-image-slice」設為2，那麼實際上邊框有一半是透明的，即可得到我們想要的「1px邊框」。

1畫素邊框

4.background漸變

背景漸變, 漸變在透明色和邊框色中間分割, frozenui用的就是這種方法, 借用它的上邊框寫法：

@media screen and (-webkit-min-device-pixel-ratio: 2)
}

缺點: **量大, 而且需要針對不同邊框結構, frozenui就定義9種基本樣式，而且這只是背景, 這樣做出來的邊框實際是在原本的border空間內部的, 如果元素背景色有變化的樣式, 邊框線也會消失。最後不能適應圓角樣式

5.:before, :after與transform

構建1個偽元素, 將它的長寬放大到2倍, 邊框寬度設定為1px, 再以transform縮放到50%.

.radius-border
@media screen and (-webkit-min-device-pixel-ratio: 2)
}

需要注意是沒有:before, :after偽元素的

優點: 其實不止是圓角, 其他的邊框也可以這樣做出來

缺點: **量也很大, 佔據了偽元素, 容易引起衝突

移動端開發的適配和1px問題

移動端1px問題

移動端1px問題

移動端開發1px邊框問題

移動端開發的適配和1px問題

移動端1px問題

移動端1px問題

移動端開發1px邊框問題

相關推薦