网页布局之 - rem布局

实现在不同宽度的设备中，网页元素尺寸等比缩放效果

---

目录

一、rem布局是什么？

二、媒体查询基本使用

三、rem布局流程

       1.媒体查询添加根字号

        2.flexible添加根字号

---

一、rem布局是什么？

相对单位，相对于HTML标签字号计算尺寸

1rem = 1HTML标签字号

• 给HTML标签添加字号

• 设置元素尺寸为rem单位

效果展示:

代码如下:

 二、媒体查询基本使用

视口不同，添加不同的根字号

@media (视口宽度) {

差异化CSS样式

}

效果展示:

代码如下:

 三、rem布局流程

1.媒体查询添加根字号

@media (视口宽度) {

  html {

     font-size: 37.5px;

  }

}

效果及代码展示:

 2.flexible添加根字号

css代码段: 

/* box 68*29 */
/* 1.媒体查询,设置不同设备的根字号 */
/* @media (width: 320px) {
    html {
        font-size: 32px;
    }
}
@media (width: 375.2px) {
    html {
        font-size: 37.5px;
    }
}
@media (width: 414.4px) {
    html {
        font-size: 41.4px;
    }
} */

/* 2.写box的盒子模型,单位rem */
.box {
    width: 1.813rem;
    height: 0.773rem;
    background-color: #ccc;
}