1. 程式人生 > >餓了麼專案---4、移動端檢視專案及border 1畫素問題

餓了麼專案---4、移動端檢視專案及border 1畫素問題

一、如何在手機等移動端檢視頁面

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得以收縮,最終呈現出細線的效果