浅谈remempx

Posted 2020-08-09 甜甜宝宝

1、px：像素(Pixel)

px是相对长度单位，他是相对于显示器屏幕分辨率而言的

优点：比较稳定、精确

缺点：在浏览器 中放大或者缩小浏览页面，会出现页面混乱的情况。

如下例子：

.buttonPX{
    width:100px;
    height:60px;
    line-height:60px;
    display: inline-block;
    font-weight:bold;">#00a0b6;
    -webkit-border-radius:90px;
    -moz-border-radius:60px;
    border-radius:15px;
    font-size:24px;
    color:#fff;
    text-decoration: none;
    text-align: center;
    border:none
}

<button type="button" class="buttonPX">确定</button>
效果：

 

2、em：是相对长度单位

em是相对于父元素来设计字体大小的，如果当前对行内文本的字体尺寸为被人为设置，则em是相对于浏览器的默认字体尺寸。浏览器默认的字体是16px，所以未经调整的浏览器都符合 1em = 16px，为了方便使用em时，通常在css的body中声明font-size=62.5%（16*62.5%=10px）

缺点：em的值并不是固定的，他会继承父元素的字体大小

 如同样设置48px的字体，设置父元素的大小和不设置父元素的大小的区别

.box1{
    font-size:12px;
}
.buttonEm{
    width:200px;
    height:60px;
    line-height:60px;
    display: inline-block;
    font-weight:bold;">#00a0b6;
    -webkit-border-radius:90px;
    -moz-border-radius:60px;
    border-radius:15px;
    font-size:4em;//注意此处
    color:#fff;
    text-decoration: none;
    text-align: center;
    border:none
}
.buttonEm2{
    width:200px;
    height:60px;
    line-height:60px;
    display: inline-block;
    font-weight:bold;">#00a0b6;
    -webkit-border-radius:90px;
    -moz-border-radius:60px;
    border-radius:15px;
    font-size:3em; //注意此处
    color:#fff;
    text-decoration: none;
    text-align: center;
    border:none
}

<div class="box1">
    <button type="button" class="buttonEm">确定</button>  //设置了父元素的字体大小
</div>
<br>
<div class="box2">
    <button type="button" class="buttonEm2">确定</button>  //未设置父元素的字体大小
</div>
如果将其中的宽度等其他元素也改为em单位，则width=10em的实际宽度为width=48(行内文本字体的尺寸)*10 = 480px,也就是width的基本单位1em=fontsize的大小

3、rem (root em,根 em)

rem是相对单位，是相对与html根节点的单位

 rem 主要是通过html 节点的fontsize确定的，所以不存在逐层复合的连锁反应

在JS的window.resize 事件中，动态的控制html节点的fontsize的大小，来动态控制rem的比例

设置rem单位的方法

方法一：直接在css样式中写一下代码即可：

html{

font-size:20px; //表示1rem相当于常用的20px，1rem = 20px

}

为了兼容适配不同的屏幕，也可斜成下面这样

html{
font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important;
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important;
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important;
    }
}

方法二：使用js动态的实现此效果

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘: ‘resize‘,
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;

            if (clientWidth > 1920) {
                clientWidth = 1920;
                docEl.style.fontSize = 25 * (clientWidth / 1200) + ‘px‘; //font-size=25
            }
            else if (clientWidth > 900) {
                docEl.style.fontSize = 25 * (clientWidth / 1200) + ‘px‘;//font-size = 25
            }
            else if (clientWidth >= 320) {
                docEl.style.fontSize = 100 * (clientWidth / 500) + ‘px‘;//font-size = 100
            }
            else if (clientWidth >= 320) {
                clientWidth = 320;
                docEl.style.fontSize = 100 * (clientWidth / 500) + ‘px‘;//font-size = 100
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
})(document, window);

 除了ie8以外，其他的都兼容rem