84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
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的