响应式字体设置rem，em，px

Posted 2023-04-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了响应式字体设置rem，em，px相关的知识，希望对你有一定的参考价值。

参考技术A px：像素（Pixel）。相对长度单位，所占大小由屏幕分辨率决定。（只适配少部分手机设备，且分辨率对页面影响不大的）

em：相对长度单位。相当于当前对象内文本的字体尺寸，如果当前对行内文本的字体尺寸未被认为设置，则相对于浏览器的默认字体尺寸。em的值并不是固定的，它会继承父级元素的字体大小。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。（em是根据标签元素自身的font-size来计算（宽高设置根据当前元素font-size），而元素自身的font-size又受他父级元素的font-size的影响，这很容易导致错误。而em计算单位的唯一优势就是它的兼容效果更佳。）

rem： CSS3新增的一个相对单位。 rem 是相对于根元素<html>，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。（一改全改，根据html的根元素标签的font-size的大小来计算）

因为HTML的根元素标签的font-size为100px；

那么 width=5rem*100px=500px;height=2.5rem*100px=250px;

参考 https://blog.csdn.net/w390058785/article/details/80223717

web app响应式字体设置！rem之我见

之前做沙漠教育的时候，直接以设计图为准，然后强暴式，缩放处理。简单。直接，粗暴！但是，开发快。……一劳永逸！

但那是，现在开发，作为业界良心：是不能那么做的！（那个是被逼的啊

首先看代码：

@media screen and (max-width:362px)and(min-width: 330px){

    html{font-size: 60%;}
    //.top-banner{
    //    font-size: 15px
    //}
    //.btn-download{
    //    margin-left: 5%;
    //}
}

@media screen and (max-width:330px){
    html{font-size: 53.333331%;}
    //.top-banner{
    //    font-size: 14px
    //}
    //.btn-download{
    //    margin-left: 4%;
    //}
}

因为我的设计图是750，iphone6设计的！

技术分享图片