javascript - 做移动页面字体需要做自适应吗？
我自己做过移动页面布局，16 18px字体在一些小屏幕下显示比较占位置而导致显示不全出现省略点，大概情况如下图；
想实现随屏幕缩小字体而缩小，但是刚刚在segmentfault查看一遍文章，说移动web做字体自适应是错误的；
Rumah > Soal Jawab > teks badan
segmentfault查看一遍文章，说移动web做字体自适应是错误的；
怪我咯2017-04-11 13:29:10
rem布局本来就是过渡方案；
不同设备没办法做自适应的，原因无非就是分辨率大小不等于设备可视大小（我有一块3.5寸的2K屏，所有应用没放大镜都没法用）～设备碎片化等等（）
PS：flex是布局，和字体没多大关系；小屏幕只需要吧基准字号改小就可以额；或者改letter-spacing！
PHP中文网2017-04-11 13:29:10
我们做的时候有两种情况
普通的文字，比如一大段文章，用px，效果就是屏幕越大，显示的文字越多
特殊要求的，如一行上就显示这么多字，用rem，使得所有设备显示的效果一样，只是文字大小不一样
可以参考淘宝的flexible
使用Flexible实现手淘H5页面的终端适配
天蓬老师2017-04-11 13:29:10
百分比下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>