84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
segmentfault
ringa_lee
不用px,用em
使用相对单位rem来布局
rem布局本来就是过渡方案;不同设备没办法做自适应的,原因无非就是分辨率大小不等于设备可视大小(我有一块3.5寸的2K屏,所有应用没放大镜都没法用)~设备碎片化等等()
PS:flex是布局,和字体没多大关系;小屏幕只需要吧基准字号改小就可以额;或者改letter-spacing!
布局用的是百分比偶尔穿插一下flex,而相应的字体大小用的是rem.做项目的时候简单很多,基本兼容的问题比较少~
可以参考一下淘宝的flexible适配方案
我们做的时候有两种情况普通的文字,比如一大段文章,用px,效果就是屏幕越大,显示的文字越多特殊要求的,如一行上就显示这么多字,用rem,使得所有设备显示的效果一样,只是文字大小不一样可以参考淘宝的flexible使用Flexible实现手淘H5页面的终端适配
可以用rem和百分比
百分比下rem(root element)配合vw(viewport width)实现四列图片等宽布局:假设宽为320px,则4vw等于4%*320=12.8px,也就是html根字体大小为12.8px.其他长度单位是这个大小的倍数,1rem就是1倍,2rem就是2倍.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"> <title>四列图片等宽布局</title> <style> * { margin: 0; padding: 0; } html { font-size: 4vw; /* rem(root element)配合vw(viewport width) */ } a { display: block; width: 25%; height: 5rem; float: left; overflow: hidden; position: relative; text-decoration: none; } img { display: block; margin: 8% auto 0; width: 40%; border: none; } .clear { clear: both; } .abs { position: absolute; bottom: 8%; left: 0; width: 100%; font-size: 1rem; line-height: 1.4rem; text-align: center; color: #000; cursor: pointer; } </style> </head> <body> <p> <a href="javascript:void(0)"><img src="php.png" /><p class="abs">说明</p></a> <a href="javascript:void(0)"><img src="php.png" /><p class="abs">说明</p></a> <a href="javascript:void(0)"><img src="php.png" /><p class="abs">说明</p></a> <a href="javascript:void(0)"><img src="php.png" /><p class="abs">说明</p></a> <a href="javascript:void(0)"><img src="php.png" /><p class="abs">说明</p></a> <a href="javascript:void(0)"><img src="php.png" /><p class="abs">说明</p></a> <a href="javascript:void(0)"><img src="php.png" /><p class="abs">说明</p></a> <a href="javascript:void(0)"><img src="php.png" /><p class="abs">说明</p></a> <p class="clear"></p> </body> </html>
如果浏览器支持rem但不支持vw,这时需要使用JS设置html标签的font-size值.如Android 2.1+ Browser支持rem,Android 4.4+ Browser才支持vw.
<script src="jquery.js"></script> <script> $("html").css("font-size", $(window).width()*0.04+"px"); $(window).resize(function(){ $("html").css("font-size", $(window).width()*0.04+"px"); }); </script>
我做响应式都用em的
图一挂了,补图;
不用px,用em
使用相对单位rem来布局
rem布局本来就是过渡方案;
不同设备没办法做自适应的,原因无非就是分辨率大小不等于设备可视大小(我有一块3.5寸的2K屏,所有应用没放大镜都没法用)~设备碎片化等等()
PS:flex是布局,和字体没多大关系;小屏幕只需要吧基准字号改小就可以额;或者改letter-spacing!
布局用的是百分比偶尔穿插一下flex,而相应的字体大小用的是rem.做项目的时候简单很多,基本兼容的问题比较少~
可以参考一下淘宝的flexible适配方案
我们做的时候有两种情况
普通的文字,比如一大段文章,用px,效果就是屏幕越大,显示的文字越多
特殊要求的,如一行上就显示这么多字,用rem,使得所有设备显示的效果一样,只是文字大小不一样
可以参考淘宝的flexible
使用Flexible实现手淘H5页面的终端适配
可以用rem和百分比
百分比下rem(root element)配合vw(viewport width)实现四列图片等宽布局:
假设宽为320px,则4vw等于4%*320=12.8px,也就是html根字体大小为12.8px.
其他长度单位是这个大小的倍数,1rem就是1倍,2rem就是2倍.
如果浏览器支持rem但不支持vw,这时需要使用JS设置html标签的font-size值.
如Android 2.1+ Browser支持rem,Android 4.4+ Browser才支持vw.
我做响应式都用em的