餓了麼專案---4、移動端檢視專案及border 1畫素問題
阿新 • • 發佈:2019-01-07
一、如何在手機等移動端檢視頁面
1.1檢視電腦IP地址
$ ipconfig---------->10.2.65.112
1.2 、獲取當前網頁的完整url地址,到草料二維碼網站(http://cli.im/)中講該ip地址轉變成一個二維碼,手機端掃碼開啟。
手機端開啟的網頁類似於客戶端瀏覽器開啟的網頁,開發程式碼過程會自動反應到手機端上。
注意事項:手機與電腦要處在同一區域網中
二、border 1px問題
由於devicePixelRatio裝置畫素比的存在,移動端永遠無法使用border-bottom屬性實現一個統一的1px細線。這個時候要去做一條細線就會需要很多技巧和經驗。
程式碼如下:
#app .tab{
position: relative;
}
.tab:after{
pointer-events: none;
width:100%;
position:absolute;
bottom:0;
left:0;
z-index:0;
content:"";
border-bottom: 1px solid rgba(7,17,27,0.1);
}
/*裝置畫素比例為2時*/
@media only screen and (-webkit-min-device-pixel-ratio:2.0),
only screen and (min-device-pixel-ratio: 2.0 ) {
.tab:after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
這條橫細線通過上面這種樣式呈現出來。這種方式的核心在於使用transform:scaleY來使得1px的border得以收縮,最終呈現出細線的效果