高清图片问题

高清图片跟我们平时下的那种电影高清图片是不一样的,移动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;

那说白了,在高清屏幕下,假如100*100的图片,那么我们就应该使用50*50的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;
      box-orient:vertical;
      -webkit-box-orient:vertical;
      -o-box-orient:vertical;
      -ms-box-orient:vertical;
      line-clamp:4;
      -webkit-line-clamp:4;
      -o-line-clamp:4;
      -ms-line-clamp:4;
}

属性-webkit-line-clamp就可以控制几行溢出,4就是第四行进行截断加“…”