rem布局

rem布局

1.rem

rem :root em 是一个相对单位，类似于em ,em是父元素字体大小；

rem的基准是相对于HTML元素字体大小

/* 根html 为 16px */
html {
   font-size: 16px;
}
/* 此时 div 的字体大小就是 32px */       
div {
    font-size: 2rem;
}

2.rem布局准备工作

基本思路：方案:1：媒体查询+less+rem ；

方案2：flexible.js+rem

项目设计稿750px尺寸

2.1 设置视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2.2 媒体查询屏幕不同尺寸

/*尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px*/
html {
    font-size: 50px;
}
// 屏幕划分为 15
@number: 15; 
// 320
@media screen and (min-width: 320px) {
    html {
        font-size: 320px / @number;
    }
}
// 360
@media screen and (min-width: 360px) {
    html {
        font-size: 360px / @number;
    }
}
// 375 iphone 678
@media screen and (min-width: 375px) {
    html {
        font-size: 375px / @number;
    }
}

// 384
@media screen and (min-width: 384px) {
    html {
        font-size: 384px / @number;
    }
}

// 400
@media screen and (min-width: 400px) {
    html {
        font-size: 400px / @number;
    }
}
// 414
@media screen and (min-width: 414px) {
    html {
        font-size: 414px / @number;
    }
}
// 424
@media screen and (min-width: 424px) {
    html {
        font-size: 424px / @number;
    }
}

// 480
@media screen and (min-width: 480px) {
    html {
        font-size: 480px / @number;
    }
}

// 540
@media screen and (min-width: 540px) {
    html {
        font-size: 540px / @number;
    }
}
// 720
@media screen and (min-width: 720px) {
    html {
        font-size: 720px / @number;
    }
}
// 750
@media screen and (min-width: 750px) {
    html {
        font-size: 750px / @number;
    }
}

2.3 元素取值

①公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）

②屏幕宽度/划分的份数，就是每一份的大小，而每一份大小就是 html font-size 的大小

③页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

2.4 less文件

less文件自动转换为css文件

less变量：

@变量名:值;如：
@color: pink;

less运算：

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

2.5 有点复杂，略，可以留言