rem布局

rem单位

• rem(root em)是一个相对单位，基准是相对html元素字体大小，类似em(父元素字体大小)
• 比如，根元素(html)设置font-size=12px，非根元素设置width：2rem；，转换成px就是24px。
• rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好的来控制整个页面的元素大小比例。

媒体查询

媒体查询（Media Query）是CSS3新语法。

• 使用@media 查询，可以针对不同的媒体类型定义不同的样式
• @media 可以针对不同的屏幕尺寸设置不同的样式
• 当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
• 目前针对很多苹果手机、Android、平板等设备都用得到多媒体查询

媒体查询语法规范

• 用@media 开头，注意@ 符号
• mediatype媒体类型
• 关键字 and not only
• media feature 媒体特性,必须有小括号包含

@media mediatype and|not|only(media feature) {CSS-Code;}

mediatype 媒体类型

将不同的终端设备划分成不同的类型，称为媒体类型

关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

• and:可以将多个媒体特性连接到一起，相当于“且”的意思
• not：排除某个媒体类型，相当于“非”的意思，可以省略
• or：可以测试多个媒体查询的条件，主要有一个条件成立，就执行，“或”的意思。
• only：指定某个特定的媒体类型，可以省略。

媒体特性

每种媒体类型都有具体个字不同的特性，根据不用媒体类型的媒体特性设置不同的展示风格。媒体特性要加小括号进行包含。

在屏幕设备中，判断屏幕尺寸大于等于800px的时候   
@media screen and (min-width: 800px) {
    body {
        background-color: pink;
    }
}
在屏幕设备中，判断屏幕尺寸最大为600px的时候屏幕为绿色
@media screen and (max-width: 600px) {
   body {
        background-color: green;
    }
}

案例

屏幕小于等于539px时，背景为蓝色；屏幕大于等于540px并且小于969px时，屏幕为绿色；当屏幕大于等于970px 时，屏幕为红色。

@media screen and (max-width: 539px) {
        body {
                background-color: blue;
        }
    }
@media screen and (min-width: 540px)and (max-width: 969px) {
        body {
            background-color: green;
        }
    }
@media screen and (min-width: 970px) {
        body {
            background-color: red;
        }
    }

媒体查询+rem实现元素动态大小变化

• rem单位是跟着html来走的，有了rem 页面元素可以设置不同大小尺寸
• 媒体查询可以根据不同设备宽度来修改样式
• 媒体查询+rem就可以实现不同设备宽度，实现页面元素的动态大小

媒体查询第二种引入方式

引入资源

• 当样式比较繁多的时候，我们可以针对不用的媒体使用不同stylesheets(样式表)。

• 原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。

• 语法规范

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

• 示例

<link rel="stylesheet" href="styleA.css" media="screen and (min-width:400px)">

维护css弊端

css是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念

• css需要书写大量看似没有逻辑的代码，css冗余度是比较高的。
• 不方便维护及扩展，不利于复用
• css没有很好的计算能力
• 非前端开发工程师来讲，往往会因为缺少css编写经验而很难写出组织良好且易于维护的css代码项目

Less

less介绍

• Less（Leaner Style Sheets）是一门css扩展语言，也称为css预处理器
• 作为css的一种形式的扩展，它并没有减少css的功能，而是在现有的css语法上，为css加入程序式语言的特性
• 它在css的语法基础之上，引入了变量、Mixin（混入）、运算以及函数等功能，大大简化了css的编写，并且降低了css的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事

Less中文网址： http://Lesscss.cn/
常见的css预处理器：Sass、Less、Stylus
总结：Less是一门css预处理语言，它扩展了css的动态特性。

Less使用

新建一个后缀名为.less的文件，在这个.less文件里书写less语句

• Less 变量
• Less 编译
• Less 嵌套
• Less 运算

Less变量

• 变量是指没有固定的值，可以动态改变的。因为css中的一些颜色和数值等经常使用
• @变量名：值；

1. 变量命名规范
   • 必须有@为前缀
   • 不能包含特殊字符
   • 不能以数字开头
   • 大小写敏感
     例如：

@pink:pink;

div {
    background-color: @pink;
}

2. 变量使用规范

Less编译

• 本质上，Less包含一套自定义的语法以及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的css文件。
• 所以，我们需要把我们的.less文件，编译生成为.css文件，这样我们的html页面才能使用它
• 推荐方法(nodejs)：在当前文件夹，使用cmd命令“lessc style.less>style.css"
• 使用Vscode插件可直接转换

Less嵌套

1. 后代选择器

div {
    width: 500px;
    height: 400px;
    background-color: yellow;
    .box {
        height: 200px;
        background-color: green;
    }
}

2. 在前面加上&符号，表示两个选择器交集或伪类。

• a 里面加上&.box，就表示选中的是有box类名的a标签。
• :hover前加&符，表示a的hover，不加则是a内元素的hover。

.nav {
    width: 200px;
    height: 200px;
    background-color: #fff;
    a {
        display: block;
        width: 100px;
        height: 100px;
        background-color: blue;
        &.box {
            background-color: pink;
        }
        &:hover {
            color: yellow;
        }
    }
}

Less运算

• 任何数字、颜色或者变量都可以参与运算。Less提供了加(+)减(-)乘(*)除(/) 算数运算。
• 除法运算时需要（）括起来或者./这么写，不然系统会默认我们写的是两个值，将不会生效。（推荐使用小括号，./是强制除法，可能会出现错误）
• 当有两个单位时候，取值第一个单位，200rem ./ 50px 结果是4rem（后面的数字不写单位也可以），如果只有一个值有单位，就取该单位。
• 运算符号左右需要加空格

div {
    width: 100px + 20px;
    height: (200px / 2);
    height: 200rem ./ 50px;
    height: 200rem ./ 50;
    background-color: orange;
}

rem适配方案

• 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
• 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。

rem适配方案技术使用（市场主流）

1. 技术方案一

   • less
   • 媒体查询
   • rem

2. 二

   • flexible.js
   • rem

总结

• 两种方案现在都存在
• 方案二更简单

rem实际开发适配方案1

rem+媒体查询+less技术

设计稿常见尺寸宽度

一般情况下，我们一一套或两套效果图适应大部分 的屏幕，放弃极端屏或对其优雅降级，牺牲一些效 果，现在基本以750为准。

动态设置html标签font-size大小

1. 假设设计稿是750px
2. 假设我们把屏幕划分为15等份（划分标准不一定，可以是20份也可以是10等份）
3. 每一份作为html字体大小，这里就是50px
4. 那么在320px设备的时候，字体大小就是320/15 就是21.33px
5. 用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的

以750标准设计稿为例：

1. 一个100*100像素的页面元素在750屏幕下，就是100/50,转换为rem是2rem*2rem ，比例是1比1
2. 320屏幕下，html字体大小为21.33则2rem=42.66px，此时宽和高都是40.66，但是宽和高的比例还是1比1
3. 但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果

公式

1. 页面元素的rem值=页面元素值（px）/（屏幕宽度/划分的份数）
2. 屏幕宽度/划分的份数 就是html font-size字体大小
3. 页面元素的rem值=页面元素值（px）/html font-size字体大小

Rem布局？什么东西？？？Rem布局又称等比缩放布局，是移动端布局中常用的一种布局方式。Rem布局可以通过两种方式实现，一种通过JavaScript实现；还有一种通过vw实现。在这里小编主要讲述第二种方式。
下面小编先简单的说一下rem布局的优缺点：
优点：在不同的设备下看起来比较协调，内容会随着设备屏幕的大小进行等比缩放。
缺点: 随着屏幕的变大或缩小不会展现更多的内容。
它的优缺点小编就说的这里，下面进入重点rem布局原理：正所谓敌不动我不动，rem布局就是采用这样的战术手法。使页面元素动态化，在不同的设备上显示的元素比例也是一样的。就比如，现在拥有一台横向屏幕分辨率为375px的设备，在其中放上一张100100px的图片，使用Rem布局过后，在另外一台横向屏幕分辨率为414px的设备，这张照片的大小就变成了110px110px。这样就可以适配在不同的设备中进行等比缩放。
小编说了那么多还不如实例来的痛快，下面进入编程状态：


小伙伴们是否会对图中的vw、rem这些单位疑惑，小编将细解这些单位：
Rem：是一个相对单位，1rem等于根元素的font-size值，1rem == 1个根元素的font-size大小 就是 1个html标签的font-size大小。
vw: view width，也是一个相对单位。但是它表示为把屏幕自动分成了100vw宽。
vh : view height，表示为把屏幕自动分成了100vh高。
100vw就等于屏幕宽的100%，如图：

那么1vw就等于屏幕宽的1%。
假设屏幕是375px那么就等于100vw 所以 1vw = 3.75px。那么100px=26.66667vw。图1中1rem=26.66667vw=100px。
假设屏幕是414px那么就等于100vw 所以 1vw = 4.14px。那么110px=26.66667vw（100px=24.154589）。图2中1rem=26.66667vw=110px。
小编今天的分享就结束了。逆战班加油！

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

目录

一、rem布局是什么？

二、媒体查询基本使用

三、rem布局流程

       1.媒体查询添加根字号

        2.flexible添加根字号

一、rem布局是什么？

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

1rem = 1HTML标签字号

• 给HTML标签添加字号

• 设置元素尺寸为rem单位

效果展示:

代码如下:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem基本使用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 1rem=1根字号的大小 */
        /* 1.html有字号 */
        /* 2.盒子添加尺寸,单位是rem */
        html {
            font-size: 20px;
        }
        .box {
            width: 5rem;
            height: 3rem;
            background-color: #ccc;
        }   
    </style>
</head>
<body>
    <div class="box"></div>
</body>

 二、媒体查询基本使用

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

@media (视口宽度) {

差异化CSS样式

}

效果展示:

代码如下:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设备宽度不同,根字号不同 */
        /* 如果检测到 设备的宽度是320的时候 大括号的css才生效 */
        @media (width :320px) {
            html {
                font-size: 32px;
            }
            body {
                background-color: #ccc;
            }
        }
        @media (width :375.2px) {
            html {
                font-size: 40px;
            }
            body {
                background-color: pink;
            }
        }
    </style>
</head>
<body>
</body>

 三、rem布局流程

1.媒体查询添加根字号

@media (视口宽度) {

  html {

     font-size: 37.5px;

  }

}

效果及代码展示:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem适配</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }     
        /* 原则:rem:根字号=视口的宽度1/10 */
        /* 320,375,414 */
        @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;
            }
        }
        .box {
            width: 5rem;
            height: 3rem;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

 2.flexible添加根字号

<script src="flexible.js"></script

效果展示: html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem开发流程</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <div class="box"></div>

    <script src="../js/flexible.js"></script>
</body>
</html>

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;
}