零碎筆記：移動Web特別樣式處理

高清圖片問題

高清圖片跟咱們平時下的那種電影高清圖片是不同的，移動Web的高清圖片的概念是我這張圖這麼大，清晰度這麼多，那麼咱們在移動設備上就該展現這麼清晰。那麼爲何會產生模糊呢？假如一張圖片 100px * 100px 那咱們在移動設備上就以 100px * 100px 去展現，這想一想也是沒有問題的。

但咱們想一想，在Retina屏幕，一個px等於兩個dp，那你拿 100px*100px 其實是拿了 200dp * 200dp 物理像素去渲染，圖片就會被拉大被模糊。

在移動Web頁面上渲染圖片，爲了不圖片產生模糊，圖片的寬高應該用物理像素單位渲染，便是 100 * 100 的圖片，應該使用 100dp * 100dp。

width:(w_value/dpr) px;
height:(h_value/dpr) px;

那說白了，在高清屏幕下，假如100100的圖片，那麼咱們就應該使用5050的px去渲染，那若是在iPhone6 Plus下這時候dpr大於2的話，那咱們就應該除以它的dpr(3)這樣的方式。

一像素邊框

一像素的邊框的問題其實最根本的問題仍是Retina屏幕的問題，那咱們設置了border:1px，那1px就等於2個dp，那它實際上這個1像素邊框拿了2個dp來渲染，因此那條線就不是很細，若是咱們拿1dp來渲染的話就會更加精緻更加細膩。

那怎麼解決呢？

若是把border:0.5px能夠不能夠呢？答案是不能夠的，由於它僅僅是ios8能夠用。

實際上更通用的方案是使用sacleY(0.5)來進行縮放處理：

.sidbar .folder li{
    padding:8px 0 8px 15px;
    color:#7c7c7c;
    cursor:pointer;
    position:relative;
}
.folder li + li:before{
    position:absolute;
    top:-1px;
    left:0;
    content:'',
    width:100%;
    height:1px;
    border-top:1px solid #ddd;
    -webkit-transform:scaleY(0.5);
}

固然，網上還有其餘方案能夠選擇。

相對單位rem

爲了適應各大屏幕的手機，px略顯固定，不能根據尺寸的大小而改變，使用相對單位更能體驗頁面的兼容性。相對單位有兩個：

• em：是根據父節點的font-size爲相對單位

• rem：是根據html的font-size爲相對單位

em在多層嵌套下，變得很是難以使用和維護了，rem更加能做爲全局贊成設置的度量，咱們推薦使用rem。

rem的基值設置多少好？迴歸咱們的目的：爲了適應各大手機屏幕，咱們能夠這樣： rem = screen.width / 20 ，或者除以10等。

// 默認320px
html{ font-size: 32px; }
// iphone6
@media (min-device-wdith : 375px) {
    html{font-size: 37.5px;}
}
// ihpone6 plus
@media (min-device-width : 414px) {
    html{font-size: 41.4px;}
}

如iphone5上的rem基值爲32px，渲染一張6464px的div，則用2rem2rem去渲染。換算公式很是簡單：

width: px/rem基值
height: px/rem基值

不使用rem的狀況：font-size

通常來說font-size是並不該該使用rem等相對單位的。由於字體的大小是趨於閱讀的實用性，並不適合與排版佈局。

同理，趨向於一些固定的元素的特性。咱們不使用rem而改成使用px去確保在不一樣的屏幕上表現一致（跟rem的目的相反）。

多行文本溢出…

單行文本溢出，對title類的使用很是多，而多行文本類，在詳情介紹則用的比較多。

/*單行文本溢出*/
.inaline{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
}
/*多行文本溢出*/
.intwoline{
      display: -webkit-box !important;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:4;
}

屬性-webkit-line-clamp就能夠控制幾行溢出，4就是第四行進行截斷加「…」

---

參考資料：
Hello，移動Web