高清图片问题
高清图片跟我们平时下的那种电影高清图片是不一样的,移动Web的高清图片的概念是我这张图这么大,清晰度这么多,那么我们在移动设备上就该展示这么清晰。那么为什么会产生模糊呢?假如一张图片 100px * 100px 那我们在移动设备上就以 100px * 100px 去展示,这想想也是没有问题的。
但我们想想,在Retina屏幕,一个px等于两个dp,那你拿 100px*100px 实际上是拿了 200dp * 200dp 物理像素去渲染,图片就会被拉大被模糊。
在移动Web页面上渲染图片,为了避免图片产生模糊,图片的宽高应该用物理像素单位渲染,即是 100 * 100 的图片,应该使用 100dp * 100dp。
1 2 | 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)来进行缩放处理:
1 2 3 4 | .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等。
1 2 3 4 | .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在多层嵌套下,变得非常难以使用和维护了,rem更加能作为全局同意设置的度量,我们推荐使用rem。
rem的基值设置多少好?回归我们的目的:为了适应各大手机屏幕,我们可以这样: rem = screen.width / 20 ,或者除以10等。
1 2 3 | // 默认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就是第四行进行截断加“…”
本文作者:网友 来源:devstore
CIO之家 www.ciozj.com 微信公众号:imciow