文章目錄
- 一、利用CSS媒體查詢維護兩套樣式
- 拓展-媒體查詢
- 二、移動端1像素線問題
一、利用CSS媒體查詢維護兩套樣式
媒體查詢：實作頁面在不同設備下正常預覽 [判斷當前設備]
DOM一致，僅通過CSS媒體查詢做不同樣式
例子：
利用媒體查詢，對螢屏寬度大于800px的設備進行一些樣式上的處理
@media screen and(min-width:800px) {
.......
}
拓展-媒體查詢
媒體型別
- all (所有的設備)
- print (列印設備)
- screen (電腦螢屏,平板電腦,智能手機)
媒體特性
- width 網頁顯示區域完全等于設定的寬度
- height 網頁顯示區域完全等于設定的高度
- max-width / max-height 網頁顯示區域小于等于設定的寬度
- min-width / min-width 網頁顯示區域大于等于設定的寬度
- orientation: portrait (豎屏模式) | landscape (橫屏模式)
語法關鍵字
- and 可以將多個媒體特性鏈接到一塊,相當于且
- not 排除某個媒體特性 相當于非,可以省略
- only 指定某個特定的媒體型別, 可以省略
- 內嵌式語法
@media only screen and (max-width: 420px) {
body {
background-color: red;
}
}
備注: 多個條件聯寫
@media only screen and (width: 320px) and (height: 568px) {}
二、移動端1像素線問題
要實作移動端上的一像素線，
window.devicePixelRatio=物理像素 /CSS像素
目前主流的螢屏DPR=2或者3，拿2倍屏來說，設備的物理像素要實作1像素，而DPR=2，
所以css 像素只能是 0.5，
一般設計稿是按照750來設計的，它上面的1px是以750來參照的，而我們寫css樣式是以設備375為參照的，所以我們應該寫的0.5px
實作：
-
transform: scaleX(0.5);
-
利用0.5px的線圖片
具體參考文章https://blog.csdn.net/qq_39903567/article/details/115004404
持續更新…
本文鏈接https://blog.csdn.net/qq_39903567/article/details/115445183
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/273253.html
標籤：其他
上一篇：HTML設定邊框的三種方式