移动端750px设计稿,rem根元素font-size多少合适???

如题…使用自动转化插件,不知道应该设置多少比较合适

阅读 14.4k
5 个回答

按照750设计稿来设置html根字体大小

(function (n, e) {
    var t = n.documentElement, i = "orientationchange" in window ? "orientationchange" : "resize", d = function () {
        var n = t.clientWidth;
        n && (t.style.fontSize = n / 7.5 + "px")
    };
    n.addEventListener && (e.addEventListener(i, d, !1), n.addEventListener("DOMContentLoaded", d, !1))
})(document, window);

换算:

rem转px
1rem=100px
px转rem
设计稿 750px = 750/100=7.5rem
      100px = 100/100 = 1rem

字体设置rem会引起发虚效果,如果没特别要求可使用rem,如果要设置px的换
使用媒体查询,单独设置字体

@media screen and (max-width: 375px) {
    div{
        font-size:11px;
    }
}
@media screen and (max-width: 414px) {
    div{
        font-size:13px;
    }
}

设计稿是设计稿,关键是看你的设计稿是按照那中设备的哪种型号来设计的,然后根据这款手机的效果来做适配其它各种手机的效果,现在主流的有两种一种是使用媒体查询,@media,另外一种是使用淘宝出的flexible,手淘参考链接:现在一般都用这个,操作简单,但是这个有点问题就是对于局部的效果处理不好。前面的媒体查询这种操作比较麻烦,但对局部效果处理很好(像凡客,京东等就是这样处理的)。总的来说这两种方案使用的都很多。

html{font-size:100px}

一般是除以10了 也就是75

推荐问题
宣传栏