【如何通过rem，font-size，媒体查询实现完美的自适应移动端布局 _css单位 _自适应】

如何通过rem，font-size，媒体查询实现完美的自适应移动端布局

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

css单位自适应

详细描述

截图

代码

html {
    font-size: 62.5%
}
@media only screen and (min-width: 481px) {
    html {
        font-size:109%!important
    }
}

@media only screen and (min-width: 561px) {
    html {
        font-size:130%!important
    }
}

编辑于2024-11-23

时间排序

热门排序

[散修弟子]PM-2062
0

chrome用62.5不行的，因为chrome默认字体为16px，如果改小于12px还是按12px显示。

下面用rem来做适配的话，计算就相当麻烦了。

简单一点的方法是将根字体改为625%

然后rem换算的时候直接把尺寸除100。

比如ps上设计图尺寸35px

那么rem就是0.35rem。这样换算方便

你得配合rem来用@media，单纯用@media并不能完全实现适配，只能实现字体大小适配。要通过rem把所有尺寸的关系都强制继承到html元素的font-size上面。这样就能完美适配了。

查看全部>

编辑于2018-09-07

去第页