搜索

首页  >  问答  >  正文

javascript - 做移动页面字体需要做自适应吗？

我自己做过移动页面布局，16 18px字体在一些小屏幕下显示比较占位置而导致显示不全出现省略点，大概情况如下图；

想实现随屏幕缩小字体而缩小，但是刚刚在segmentfault查看一遍文章，说移动web做字体自适应是错误的；

请问flex能解决字体问题吗？，小屏幕显示16px 18px字体如何解决字体过大占空间问题？

ringa_leeringa_lee2823 天前1992

全部回复(12)我来回复

  • 黄舟

    黄舟2017-04-11 13:29:10

    图一挂了，补图；

    回复
    0
  • PHPz

    PHPz2017-04-11 13:29:10

    不用px,用em

    回复
    0
  • 天蓬老师

    天蓬老师2017-04-11 13:29:10

    使用相对单位rem来布局

    回复
    0
  • 怪我咯

    怪我咯2017-04-11 13:29:10

    rem布局本来就是过渡方案；
    不同设备没办法做自适应的，原因无非就是分辨率大小不等于设备可视大小（我有一块3.5寸的2K屏，所有应用没放大镜都没法用）～设备碎片化等等（）

    PS：flex是布局，和字体没多大关系；小屏幕只需要吧基准字号改小就可以额；或者改letter-spacing！

    回复
    0
  • 天蓬老师

    天蓬老师2017-04-11 13:29:10

    布局用的是百分比偶尔穿插一下flex，而相应的字体大小用的是rem.做项目的时候简单很多，基本兼容的问题比较少~

    回复
    0
  • PHP中文网

    PHP中文网2017-04-11 13:29:10

    可以参考一下淘宝的flexible适配方案

    回复
    0
  • PHP中文网

    PHP中文网2017-04-11 13:29:10

    我们做的时候有两种情况
    普通的文字，比如一大段文章，用px，效果就是屏幕越大，显示的文字越多
    特殊要求的，如一行上就显示这么多字，用rem，使得所有设备显示的效果一样，只是文字大小不一样
    可以参考淘宝的flexible
    使用Flexible实现手淘H5页面的终端适配

    回复
    0
  • 黄舟

    黄舟2017-04-11 13:29:10

    可以用rem和百分比

    回复
    0
  • 天蓬老师

    天蓬老师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>

    回复
    0
  • 高洛峰

    高洛峰2017-04-11 13:29:10

    我做响应式都用em的

    回复
    0
  • 取消回复