1.圓角不圓
比如需要我們畫一個 r 為 5px 的圓，如果我們使用 rem 作為單位，我們很快會發現在一些機型上的圖案不圓，會呈現橢圓形。這是由於 rem 轉 px 會存在精度丟失問題。
所以這個時候我們就需要使用 px 配合 dpr 來實現：
.circle(@size,@backgroundColor){
width:@size;
height:@size;
background-color:@backgroundColor;
[data-dpr='1']&{
width:@size*0.5;
height:@size*0.5;
}
[data-dpr='3']&{
width:@size*1.5;
height:@size*1.5;
}
}
2.1px 細線問題
1.使用偽類 + transform
.border_bottom{
overflow:hidden;
position:relative;
border:none!inportant;
}
.border_bottom:after{
content:'';
position:absolute;
left:0;
bottom:0;
width:100%;
height:1px;
background-color:#d4d6d7;
-webkit-transfrom-origin:0 0;
transfrom-origin:0 0;
-webkit-transform:scaleY(0.5);
transform:scaleY(0.5);
}
使用box-shadow模擬
.border_bottom{
box-shadow:inset 0px -1px 1px -1px #d4d6d7;
}
3. 從 html 元素繼承 box-sizing
在大多數情況下我們在設置元素的 border 和 padding 並不希望改變元素的 width,height值，這個時候我們就可以為該元素設置 box-sizing:border-box;。
我不希望每次都重寫一遍，而是希望他是繼承而來的，那么我們可以使用如下代碼：
html{
box-sizing:border-box;
}
*,*:before,*:after{
box-sizing:inherit;
}
這樣的好處在於他不會覆蓋其他組件的 box-sizing 值，又無需為每一個元素重復設置 box-sizing:border-box;。
4. 內聯首屏關鍵 CSS
性能優化中有一個重要的指標 —— 首次有效繪制（FMP），即指頁面的首要內容（primary content）出現在屏幕上的時間。這一指標影響用戶看到頁面前所需等待的時間，而 內聯首屏關鍵 CSS（即 Critical CSS，可以稱之為首屏關鍵 CSS） 能給用戶一個更好的心理預期。
我們知道內聯 CSS 能夠使瀏覽器開始頁面渲染的時間提前，即在 HTML 下載完成之后就能渲染了。
既然是內聯關鍵 CSS，也就說明我們只會將少部分的 CSS 代碼直接寫入 HTML 中。至於內聯哪些 CSS 你可以使用 Critical。
5.超出省略
.line-camp{
text-overflow:-o-ellipsis-lastline;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:@clamp;
-webkit-box-orient:vertical;//這句在webpack打包時會省略
}
解決方案
.line-camp{
text-overflow:-o-ellipsis-lastline;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:@clamp;
/*!autoprefixer:off*/
-webkit-box-orient:vertical;//這句在webpack打包時會省略
/*!autoprefixer:on*/
}
6.兩端對齊
html
<div>姓名</div>
<div>手機號碼</div>
<div>密碼</div>
css
div{
margin:10px 0;
width:100px;
text-align-last:justify;
}
本文摘自公眾號 作者：小生方勤「前端詞典」系列文章作者，致力於輸出對讀者有幫助的文章