零碎笔记：移动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