需求：

1.页面布局文字能否随着屏幕大小变化而变化?：在我们之前的百分比布局和flex布局中，font-size是指定多少像素，这会让文字大小不随屏幕大小变化而变化，可能会导致超小的屏幕里显示超大字体，不美观。而rem就可以动态调整文字大小。 2.流式布局和flex布局主要针对于宽度布局，那高度如何设置?：在我们之前的百分比布局和flex布局中，一个盒子的height是制定好多少px如44px。如果手机很小，那么就会一个板块占用太高的高度，不美观。

3.怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放?：在我们之前的百分比布局和flex布局中，一个盒子的height是制定好多少px如44px。所以没有屏幕发生变化的时候元素高度和宽度等比例缩放。

rem 单位

rem(root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px.

在rem布局中设置所有的盒子的font-size一般都用rem作单位，只要我们根据屏幕宽度动态调整html的font-size（如当屏幕宽时我们设置html的font-size: 16px;当屏幕窄时我们设置html的font-size: 12px;）,那么就有了网页文字随屏幕宽度动态缩放的效果。

媒体查询

上述方案有一个问题，怎么根据屏幕宽度动态调整html的font-size？用js？。其实可以用媒体查询。

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

@media mediatype and | not | only (media feature) {
    csS-Code;
    /* 上个用@的是动画 */
}
用 @media开头以申明媒体查询，注意@符号; mediatype 媒体类型 如打印机 / 手机屏幕； 关键字 and not only; media feature 媒体特性,必须有小括号包含

mediatype 媒体类型

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

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。取screen值时，媒体查询代码将只作用于电脑屏幕，平板电脑，智能手机等。常用取值。

关键字

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

值
and	可以将多个媒体特性连接到一起，相当于“且”的意思。常用取值。
not	排除某个媒体类型，相当于“非”的意思，可以忽略。
only	指定某个特定的媒体类型，可以忽略

媒体特性

每种媒体类型都有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个，注意他们要加小括号包含。

值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域宽度。常用取值。
max-width	定义输出设备中页面最大可见区域宽度。常用取值。

案例

<style>
    @no: 15;
    @media screen and (max-width: 800px) {
        body {
            background-color: pink;
            font-size: (320px / @no);  // 除法加上小括号更稳妥些
        }
    }
</style>
意思是，调用媒体查询，如果查询发现当前是屏幕（screen）（非打印机），且（and）屏幕宽度<=800px（max-width: 800px），就设置body的背景色为粉色。实测发现屏幕宽度等价于html标签宽度。

@media screen and (max-width: 800px) {
    body {
        background-color: pink;
    }
}

@media screen and (max-width: 600px) {
    body {
        background-color: purple;
    }
}
该代码先说屏幕宽度在[0, 800px]时，body粉色，接着说屏幕宽度在[0, 600px]时，body紫色，所以最终形成了屏幕宽度在[0, 600px]时，body紫色，当屏幕宽度在(600px, 800px]时，body粉色，否则body无色。如果两段代码调换顺序，就是先说屏幕宽度在[0, 600px]时，body紫色，接着说屏幕宽度在[0, 800px]时，body粉色，所以最终形成了屏幕宽度在[0, 800px]时，body粉色，否则body无色。(层叠性)

<style>
    @media screen and (min-width: 500px) and (max-width: 800px) {
        body {
            background-color: yellow;   
        }
    }
</style>

在设置媒体查询时，推荐从屏幕宽度的小到大依次设置。

引入资源（了解）

三星官网，当用电脑浏览时，页面四个盒子是这么布局的：

03rem布局

当用手机浏览时，四个盒子变得一样宽、高且竖着摆放。三星的做法是分别为大屏和小屏写了一套css样式文件，在link中判断设备尺寸然后决定引用哪套.css。

引入资源就是针对于不同的屏幕尺寸调用不同的css文件。

语法：对，和媒体查询语法基本一致
<link rel="stylesheet" href="./css640.css" media="screen and (min-width: 640px)">

例：

<!-- index.html -->
<!DOCTYPE html>
<head>
    <!-- 媒体查询也是css代码，遵守层叠性，所以推荐从小屏幕到大屏幕书写媒体查询代码 -->
    <link rel="stylesheet" href="./css320.css" media="screen and (min-width: 320px)">
    <link rel="stylesheet" href="./css640.css" media="screen and (min-width: 640px)">
</head>
<body>
    <div>1</div> <div>2</div>
</body>
</html>

/* css320.css */
div  {
    width: 100%;
    height: 100px;
}
div:nth-child(1) {
    background-color: pink;
}
div:nth-child(2) {
    background-color: purple;
}

/* css640.css */
div  {
    float: left;
    width: 50%;
    height: 100px;
}
div:nth-child(1) {
    background-color: pink;
}
div:nth-child(2) {
    background-color: purple;
}

效果图如下：

03rem布局

less基础

为什么学less

因为css的弊端：CSS是一门非程序式语言，没有变量、函数、SCOPE(作用域)等概念。所以1.CSS需要书写大量看似没有逻辑的代码，CSS元余度是比较高的(多个元素用同样的样式，可以用同一个类名算是难得的代码复用了);不方便维护及扩展，不利于复用；CSS没有很好的计算能力（就calc()）（例如已知子盒子50px，父盒子82px，请在响应式布局中保持该比例，我们竟然要频繁使用计算器计算如50/82=1.64，才知道设置子盒子1rem，父盒子1.64rem）；非前端开发工程师来讲，往往会因为缺少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代码才能运行。

less变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。例如你的任务是给十来个不同的盒子加pink背景色，那么你可能将重复background-color: pink;十来次，有一天网站换风格了，以蓝色系为主，于是你又要依次修改十来次代码，改成background-color: blue;而现在咱可以像C的DEFINE COLOR = BLUE; 一样，直接写十来处background-color: @COLOR；哪天换风格了，只需要改动一处COLOR值即可，方便吧~

@变量名:值;  // 这是注释

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

// 实例 my.less
@color: blue; // css里你见过=等号？
body  {
    background-color: @color;
}

div  {
    background-color: @color;
}

less编译 | vscode可以下载easy less插件

上面示例代码也不能直接运行啊，要编译成css代码，vscode可以下载easy less插件，安装后，每次写好less文件后保存文件，即可自动生成对应的css文件，例如上例保存my.less后插件为我们自动生成my.css

03rem布局

less嵌套

在css里，给div.header>a设计样式，我们是

.header { width: 200px; }
.header a {color: red; }

这样就积累了好多行代码，冗长的很，且层级关系不明显。在less里，父子关系的标签，子标签的样式可以写在父标签的样式里，这样：

.header { 
    width: 200px;  // 如果父亲没有样式，这行也可以不要，总之要突出一个层级关系
    a {
        color: red;
    }
}  // 当然，easy less还是会把代码编译成和上述css代码一样。

如果遇见 交集|伪类|伪元素选择器 ，

内层选择器的前面没有&符号，则它被解析为父选择器的后代;（也就是前面的代码们）
如果有&符号，它就被解析为父元素自身或父元素的伪类。例子如下：

nav {
    a {
        color: red;
        &:hover {
            color: aqua;
        }
    }
    &::after {
        content: '123';
    }
    &.test {
        color: purple;
    }
}

等价于

nav a {
  color: red;
}
nav a:hover {
  color: aqua;
}
nav::after {
  content: '123';
}
nav.test {
  color: purple;
}

可见，less语法里写了&的地方，编译成css代码就是直接和包裹&的选择器拼接。

补充：交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，语法如h3.test{color: red;} 意思是选中所有h3标签且类名带test的。

less运算

运算符左右必须空格隔开，像calc（）的参数一样
less里80 / 40px 为css的2px。两数运算，如果只有一个数有单位，结果的单位以此单位为准
less里80rem / 40px为css的2rem。两数运算，如果两数都有单位，结果单位以前者的单位为准

@border: 5px + 5;
nav {
    width: 200px - 50;
    height: (200px + 50) * 2px;
    border: @border solid red;
    background-color: red - #222;
    background-color: #666 - #222;
}  // 对应下面的代码
// less里除法如width: (320px / 15);要加小括号，不然转成css代码，未被计算

nav {
  width: 150px;
  height: 500px;
  border: 10px solid red;
  background-color: #dd0000;
  background-color: #444444;
}

less 的 import

@import "common";   // @import "common.less";一样的
// 当我们创建了common.less和index.less，我们与其在html里<link rel="stylesheet" href="./common.css"> <link rel="stylesheet" href="./index.css">，我们不如在index.less里导入common.less，这样html里只需要引入一次即可。

rem适配方案原理

目标

让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。

how to 实现该目标?

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

how to use?

03rem布局

两种方案

less + 媒体查询 + rem （less是主流了，flexible js 问题其实挺多的,官网自己都不推荐了）
flexible.js + rem（给我的感觉就是flexible.js替代了媒体查询，cssrem插件替代了less） (简单，我唯一看好的优点：flexible.js设置的1rem是随屏幕尺寸实时动态变化的。可能从50.1px跳到50.2\、50.3、50.4....，这是媒体查询只能设置十几个离散值所不及的，所以flexible.js的网页响应式更丝滑)。

less + 媒体查询 + rem（高亮是核心，是做法）

03rem布局

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

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

假设设计稿是750px
假设我们把整个屏幕划分为15等份(划分标准不一定15，也可以是20份也可以是10等份)
每一份作为html字体大小，这里就是750/15=50px
那么在320px设备的时候，html字体大小为320/15就是21.33px
用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
比如我们以750px宽为标准设计稿
750px设计稿的一个元素量得100×100px，就是100/50 转换为rem 是 2rem*2rem ，比例是1比1，在320屏幕下，html 字体大小为 21.33px 则 2rem = 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是1比1。
但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果

<!-- 具体例子，模板 -->
<!DOCTYPE html>
<head>
    <style>
        @media screen and (min-width: 320px) {
            html {
                font-size: 21.33px;
            }
        }
        @media screen and (min-width: 750px) {
            html {
                font-size: 50px;
            }
        }
        div {
            width: 2rem;
            height: 2rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

flexible.js + rem

上面的less+媒体查询+rem较为繁琐，我光写个common.less用于媒体查询屏幕尺寸来设置html的font-size就写了半百行代码，所以又推出了flexible.js + rem，更简洁更高效。

手机淘宝团队出的简洁高效移动端适配库我们再也不需要在写不同屏幕的媒体查询，因为里面is做了处理它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备的html文字大小就可以了比如当前设计稿是750px，那么我们只需要把 html文字大小设置为75px(750px/10)就可以里面页面元素rem值:页面元素的px值/75剩余的，让flexible.js来去算。

flexible.js的下载地址https://github.com/amfe/lib-flexible

作用是用js帮我们实现common.less用于媒体查询屏幕尺寸来设置html的font-size的半百行代码的功能。根据注释，这个文件默认将屏幕划分10等份。验证：打开flexible.js初始化的网页，查看html的width，查看html的font-size，比例就是划分几等份。

然后，1rem等于750px / 10 = 75px设置好了，网页组件怎么设置动态的大小呢？开始怀念less的(组件大小rem / @baseFont)了，首先less已经是主流了，其次我们还可以用vs code插件px to rem & rpx & vw (cssrem)，当我们手动输入16px时它能自动帮我们改成1rem。去settings - extensions里找cssrem config - root font size能调整默认的1rem等价于多少px。如果更改后效果没有立即生效，重启下vs code

但是呢，flexsible.js是根据屏幕尺寸 / 10得出1rem的，当我html的宽是800px，屏幕尺寸1000px时，我希望的1rem = 75px（因为body的max-width: 750px;），实际是1rem = 100px。改正：

@media screen and (min-width: 750px) {
    html {
        font-size: 75px!important;
    }
}

需求：1.页面布局文字能否随着屏幕大小变化而变化?：在我们之前的百分比布局和flex...

03rem布局

需求：

rem 单位

媒体查询

mediatype 媒体类型

关键字

媒体特性

案例

引入资源（了解）

less基础

为什么学less

Less 介绍

less变量

less编译 | vscode可以下载easy less插件

less嵌套

补充：交集选择器

less运算

less 的 import

rem适配方案原理

目标

how to 实现该目标?

how to use?

两种方案

less + 媒体查询 + rem（高亮是核心，是做法）

flexible.js + rem

相关推荐

03rem布局

02flex布局

01移动端初始、二倍图、流式布局

04慕客、黑马面面项目

共有 0 条评论

一二三级目录分类总览

随便看看

APK资源提取器.apk

子域名挖掘机5.0修改版使用教程

.git泄露漏洞与GitHack工具

vulfocus靶场的搭建教程

WhatWeb