响应式设计
“响应式设计（Responsive Design）” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！
1.rem
1.1 为什么使用 rem 布局
前两两种布局方式一直没有解决两个问题
- 页面中的文字不能随着屏幕变化而变化，比如前面的仿京东页面
- 百分比布局和flex布局主要针对宽度布局，高度一致被忽视
采用 rem 布局，可以让屏幕发生变化时，元素的高度和宽度以及文字大小等能够等比例缩放
1.2 rem单位
rem (root em)是一个相对单位，类似于em，em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如，根元素（html）设置font-size=12px; 非根元素设置 width:2rem; 则换成px表示就是24px。
html {
font-size: 12px;
}
.box {
width: 10rem;
height: 10rem;
background-color: orange;
font-size: 1.5rem;
color: #fff;
text-align: center;
line-height: 10rem;
}
<div class="box">hello rem</div>
展示效果（我们可以通过调整字体大小，观察盒子变化）:
rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的 元素大小。
1.3px、em 和 rem 还有 % 三者区别
px
px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的
特点
- IE无法调整那些使用px作为单位的字体大小；
- 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
- Firefox能够调整px和em，rem，但是有大部分的国产浏览器使用IE内核。
em
em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）
如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸
特点：
- em的值并不是固定的；
- em会继承父级元素的字体大小
rem
rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位
如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px
html{font-size: 62.5%} /* 10 ÷ 16 × 100% = 62.5% */
body{font-size: 1.4rem;} /* 1.4 × 10px = 14px *//*在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）*/
优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好
rem兼容性：除了IE8及更早版本外，所有浏览器均已支持rem
特点：
- rem 相对单位，相对于根元素
<html>; - 相对大小和绝对大小的优点于一身;
- 修改根元素就成比例地调整所有字体大小;
- 避免字体大小逐层复合的连锁反应.
%（百分比）
一般来说就是相对于父元素
特点：
-
对于普通定位元素就是我们理解的父元素
-
对于position: absolute;的元素是相对于已定位的父元素
-
对于position: fixed;的元素是相对于ViewPort（可视窗口）
px、em和rem 的问题：
使用 px 设置字体大小时，存在一个问题:
当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。
rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
| 二者比较 | em | rem |
|---|---|---|
| 单位基于 | 基于使用他们的元素的字体大小 | 基于 html 元素的字体大小。 |
| 继承 | 可能受任何继承的父元素字体大小影响 | 可以从浏览器字体设置中继承字体大小。 |
| 使用情况 | 使用em单位应根据组件的字体大小而不是根元素的字体大小。 不使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。 | 使用rem单位，除非你确定你需要 em 单位，包括对字体大小。 |
注意：
- 媒体查询中使用 rem 单位。
- 不要在多列布局中使用 em 或 rem ,改用%。
- 不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。
2.媒体查询
2.1 为什么使用媒体查询
上面案例中，使用rem作为元素的单位
元素的尺寸就会随着 html 中 fong-size 的变化而变换
当屏幕较大时，设置 font-size 为较大值，元素就会变大；当屏幕较小时，设置 font-size 为较小值，元 素就会变小
问题来了：如何在屏幕大小发生变化时，改变 html 的 font-size 的值呢，换言之，如果在不同大小的屏 幕中渲染当前页面时，动态的根据当前屏幕初始化 html 的 font-size 的值呢？
媒体查询是一种比较友好的方式，但不是唯一的方式
2.2 定义和使用：
媒体查询（Media Query）是CSS3新语法。
-
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
-
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
-
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
-
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
2.3 CSS 语法：
- 用 @media开头 注意@符号
- mediatype 媒体类型
- 关键字 and not only media feature 媒体特性必须有小括号包含
@media mediatype and|not|only (media feature) {
CSS-Code;
}
2.4 逻辑操作符：
操作符not、and、only和逗号(,)可以用来构建复杂的媒体查询
2.4.1 and
and操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真
注意：在不使用not或only操作符的情况下，媒体类型是可选的，默认为all
满足横屏以及最小宽度为700px的条件应用样式表
@media all and (min-width: 700px) and (orientation: landscape) { ... }
由于不使用not或only操作符的情况下，媒体类型是可选的，默认为 all，所以可以简写为
@media (min-width: 700px) and (orientation: landscape) { ... }
2.4.2 or
将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真，相当于or操作符
满足最小宽度为700像素或是横屏的手持设备应用样式表
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
2.4.3 not
not操作符用来对一条媒体查询的结果进行取反
注意：not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询
2.4.4 only
only操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用
media="only screen and (max-width:1000px)"{...}
上面这行代码，在老式浏览器中被解析为media=“only”，因为没有一个叫only的设备，所以实际上老式浏览器不会应用样式
media="screen and (max-width:1000px)"{...}
上面这行代码，在老式浏览器中被解析为media=“screen”，它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式
所以，在使用媒体查询时，only最好不要忽略
2.4.5 , (逗号)
逗号用于将多个媒体查询合并为一个规则。 逗号分隔列表中的每个查询都与其他查询分开处理。 因此，如果列表中的任何查询为true，则整个media语句均返回true。 换句话说，列表的行为类似于逻辑或or运算符。
@media screen and (max-width:600px),(min-width:900px) {
body{
background-color: #000;
}
2.5 媒体类型：
将不同的终端设备划分成不同的类型，称为媒体类型
| 值 | 描述 |
|---|---|
| all | 用于所有设备 |
| aural | 已废弃。用于语音和声音合成器 |
| braille | 已废弃。 应用于盲文触摸式反馈设备 |
| embossed | 已废弃。 用于打印的盲人印刷设备 |
| handheld | 已废弃。 用于掌上设备或更小的装置，如PDA和小型电话 |
| 用于打印机和打印预览 | |
| projection | 已废弃。 用于投影设备 |
| screen | 用于电脑屏幕，平板电脑，智能手机等。 |
| speech | 应用于屏幕阅读器等发声设备 |
| tty | 已废弃。 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备 |
| tv | 已废弃。 用于电视和网络电视 |
2.6 媒体功能：
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。
注意他们要加小括号包含
| 值 | 描述 |
|---|---|
| aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |
| color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0 |
| color-index | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0 |
| device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率。 |
| device-height | 定义输出设备的屏幕可见高度。 |
| device-width | 定义输出设备的屏幕可见宽度。 |
| grid | 用来查询输出设备是否使用栅格或点阵。 |
| height | 定义输出设备中的页面可见区域高度。 |
| max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
| max-color | 定义输出设备每一组彩色原件的最大个数。 |
| max-color-index | 定义在输出设备的彩色查询表中的最大条目数。 |
| max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
| max-device-height | 定义输出设备的屏幕可见的最大高度。 |
| max-device-width | 定义输出设备的屏幕最大可见宽度。 |
| max-height | 定义输出设备中的页面最大可见区域高度。 |
| max-monochrome | 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 |
| max-resolution | 定义设备的最大分辨率。 |
| max-width | 定义输出设备中的页面最大可见区域宽度。 |
| min-aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的最小比率。 |
| min-color | 定义输出设备每一组彩色原件的最小个数。 |
| min-color-index | 定义在输出设备的彩色查询表中的最小条目数。 |
| min-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最小比率。 |
| min-device-width | 定义输出设备的屏幕最小可见宽度。 |
| min-device-height | 定义输出设备的屏幕的最小可见高度。 |
| min-height | 定义输出设备中的页面最小可见区域高度。 |
| min-monochrome | 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 |
| min-resolution | 定义设备的最小分辨率。 |
| min-width | 定义输出设备中的页面最小可见区域宽度。 |
| monochrome | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 |
| orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度。 |
| resolution | 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm |
| scan | 定义电视类设备的扫描工序。 |
| width | 定义输出设备中的页面可见区域宽度。 |
2.6.1案例：
2.6.1.1 5 不同屏幕宽度设置body背景：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>媒体查询</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<style>
@media screen and (min-width:320px){
/*当屏幕>=320px时，颜色改变*/
body{
background-color: aqua;
}
}
@media screen and (min-width:750px) {
body{
/*当屏幕>=750px时，颜色改变*/
background-color: blue;
}
}
</style>
</head>
<body>
</body>
</html>
效果展示：
注意：如果颠倒顺序，因为后面的 min-width 320 其实包含了前面 minwidth 750，就会导致 minwidth 750 的设置失效
2.6.1.2 通过媒体查询改变文字大小
@media screen and (min-width: 320px) {
html {
font-size: 12px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 16px;
}
}
@media screen and (min-width: 1020px) {
html {
font-size: 20px;
}
}
.box {
width: 10rem;
height: 10rem;
background-color: orange;
font-size: 1.5rem;
color: #fff;
text-align: center;
line
}
<div class="box">hello rem</div>
效果展示：(文字随着屏幕的拖动变大变小)
2.7 媒体查询书写规则
注意： 为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从 小到大来写，这样代码更简洁
还是利用设置body背景的小案例
@media screen and (max-width: 800px) {
body{
background-color: #ccc;
}
}
当屏幕宽度<=800px 像素时，body背景颜色为 #ccc
还可以在划分一个挡位
@media screen and (max-width: 800px) {
body{
background-color: #ccc;
}
}
@media screen and (max-width:540px) {
body{
background-color: #666;
}
}
当屏幕宽度<=840px 像素时，body背景颜色为 #ccc
当屏幕宽度<=540px 像素时，body背景颜色为 #666
书写顺序 如果把上面的媒体查询颠倒一下顺序
@media screen and (max-width:540px) {
body{
background-color: #666;
}
}
@media screen and (max-width: 800px) {
body{
background-color: #ccc;
}
}
下面的设置就不再生效了，因为第二个设置包含第一个，所以我们把握住一个原则：前面的设置不能包 含在后面的媒体查询中，否则就会失效
@media screen and (max-width:540px) {
body{
background-color: #666;
}
}
又比如下面的代码就没有问题，但是如果颠倒顺序，因为后面的 min-width 320 其实包含了前面 minwidth 750，就会导致 minwidth 750 的设置失效
@media screen and (min-width: 320px) {
body {
background-color: red;
}
}
@media screen and (min-width: 750px) {
body {
background-color: blue;
}
}
2.8 媒体特性
媒体查询获取的宽度是页面中设置的 viewport 的 width 宽度
媒体特性（Media features）描述了 user agent、输出设备，或是浏览环境的具体特征。媒体特性表达 式是完全可选的，它负责测试这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号 括起来
下面是mdn 中列出的所有的媒体特性，有新的特性倍添加，也有旧的特性被废弃
| 名称 | 简介 | 备注 |
|---|---|---|
any-hover | 是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上？ | 在 Media Queries Level 4 中被添加。 |
any-pointer | 可用的输入机制中是否有任何指针设备，如果有，它的精度如何？ | 在 Media Queries Level 4 中被添加。 |
aspect-ratio | 视窗（viewport）的宽高比 | |
color | 输出设备每个像素的比特值，常见的有 8、16、32 位。如果设备不支持输出彩色，则该值为 0 | |
color-gamut | 用户代理和输出设备大致程度上支持的色域 | 在 Media Queries Level 4 中被添加。 |
color-index | 输出设备的颜色查询表（color lookup table）中的条目数量，如果设备不使用颜色查询表，则该值为 0 | |
device-aspect-ratio | 输出设备的宽高比 | 已在 Media Queries Level 4 中被弃用。 |
device-height | 输出设备渲染表面（如屏幕）的高度 | 已在 Media Queries Level 4 中被弃用。 |
device-width | 输出设备渲染表面（如屏幕）的宽度 | 已在 Media Queries Level 4 中被弃用。 |
display-mode | 应用程序的显示模式，如web app的manifest中的display 成员所指定 | 在 Web App Manifest spec被定义. |
forced-colors | 检测是user agent否限制调色板 | 在 Media Queries Level 5 中被添加。 |
grid | 输出设备使用网格屏幕还是点阵屏幕？ | |
height | 视窗（viewport）的高度 | |
hover | 主要输入模式是否允许用户在元素上悬停 | 在 Media Queries Level 4 中被添加。 |
inverted-colors | user agent或者底层操作系统是否反转了颜色 | 在 Media Queries Level 5 中被添加。 |
light-level | 环境光亮度 | 在 Media Queries Level 5 中被添加。 |
monochrome | 输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕，则该值为 0 | |
orientation | 视窗（viewport）的旋转方向 | |
overflow-block | 输出设备如何处理沿块轴溢出视窗(viewport)的内容 | 在 Media Queries Level 4 中被添加。 |
overflow-inline | 沿内联轴溢出视窗(viewport)的内容是否可以滚动？ | 在 Media Queries Level 4 中被添加。 |
pointer | 主要输入机制是一个指针设备吗？如果是，它的精度如何？ | 在 Media Queries Level 4 中被添加。 |
prefers-color-scheme | 探测用户倾向于选择亮色还是暗色的配色方案 | 在 Media Queries Level 5 中被添加。 |
prefers-contrast | 探测用户是否有向系统要求提高或降低相近颜色之间的对比度 | 在 Media Queries Level 5 中被添加。 |
prefers-reduced-motion | 用户是否希望页面上出现更少的动态效果 | 在 Media Queries Level 5 中被添加。 |
prefers-reduced-transparency | 用户是否倾向于选择更低的透明度 | 在 Media Queries Level 5 中被添加。 |
resolution | 输出设备的像素密度（分辨率） | |
scan | 输出设备的扫描过程（适用于电视等） | |
scripting | 探测脚本（例如 JavaScript）是否可用 | 在 Media Queries Level 5 中被添加。 |
update | 输出设备更新内容的渲染结果的频率 | 在 Media Queries Level 4 中被添加。 |
width | 视窗（viewport）的宽度，包括纵向滚动条的宽度 |
其实，除了上面的特性，还有一些特性虽然不能被所有浏览器支持，但也能被部分支持
- width：此特性又有 max-width 和 min-width 两个扩展，实际开发中，这两个扩展用的是最多的
- -webkit-device-pixel-ratio：是一个非标准的布尔类型CSS媒体类型，获取的媒体的 dpr(https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/-webkit-device-pixel-ratio)
- -webkit-max-device-pixel-ratio：最大的 drp
- -webkit-min-device-pixel-ratio：最小 dpr
- orientation：CSS 媒体属性屏幕方向（ orientation ）可用于测试视口 viewport（或者对于分页 媒体而言的页面框盒）的横纵d方向（https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/orientation）
- portrait：viewport 处于纵向，即高度大于等于宽度
- landscape：viewport 处于横向，即宽度大于高度
案例
当媒体的 dpr 为 2 时，body 的设置生效
@media (-webkit-device-pixel-ratio:2){
body{
background-color: red;
}
}
当媒体的 drp 在 2 以下时，body 的设置生效
@media screen and (-webkit-max-device-pixel-ratio:2) {
body{
background-color: #000;
}
}
当媒体的 dpr 在 2 以上时，body 的设置生效
@media screen and (-webkit-min-device-pixel-ratio:2) {
body{
background-color: #000;
}
}
当媒体的 dpr 在2以上，并且为横向时，body 的设置生效
@media (-webkit-min-device-pixel-ratio:2) and (orientation: landscape) {
body {
background-color: red;
}
}
2.9通过媒体查询实现响应式布局
通过媒体查询实现下面的效果
- 屏幕宽度 <=576px 时，每行显示1张图片
- 屏幕宽度>576px 并且 <=768px 时，每行显示2张图片
- 屏幕宽度>768px，并且<=992px 时，每行显示4张图片
- 屏幕宽度>992px，并且<=1200px 时，每行显示6张图片
- 屏幕宽度>1200px 时，每行显示12张图片
实现代码如下：
<body>
<div class="row">
<div class="col">
<img src="./images/1.jpg" alt="">
</div>
<div class="col">
<img src="./images/1.jpg" alt="">
</div>
<div class="col">
<img src="./images/1.jpg" alt="">
</div>
<div class="col">
<img src="./images/1.jpg" alt="">
</div>
<div class="col">
<img src="./images/1.jpg" alt="">
</div>
<div class="col">
<img src="./images/1.jpg" alt="">
</div>
<div class="col">
<img src="./images/1.jpg" alt="">
</div>
<div class="col">
<img src="./images/1.jpg" alt="">
</div>
<div class="col">
<img src="./images/1.jpg" alt="">
</div>
<div class="col">
<img src="./images/1.jpg" alt="">
</div>
<div class="col">
<img src="./images/1.jpg" alt="">
</div>
<div class="col">
<img src="./images/1.jpg" alt="">
</div>
</div>
</body>
css代码：
* {
margin: 0;
padding: 0;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.col {
padding: 10px 0;
background-color: #000;
box-sizing: border-box;
border: 1px solid #000;
}
.col img {
width: 100%;
height: 100%;
}
/* - 屏幕宽度 <=576px 时，每行显示1张图片
- 屏幕宽度>576px 并且 <=768px 时，每行显示2张图片
- 屏幕宽度>768px，并且<=992px 时，每行显示4张图片
- 屏幕宽度>992px，并且<=1200px 时，每行显示6张图片
- 屏幕宽度>1200px 时，每行显示12张图片
*/
/* 移动端优先 */
@media (max-width: 576px) {
.col {
width: 100%;
}
}
@media (min-width: 577px) and (max-width: 768px) {
.col {
width: 50%;
}
}
@media (min-width: 769px) and (max-width: 992px) {
.col {
width: 25%;
}
}
@media (min-width: 993px) and (max-width: 1200px) {
.col {
width: 16.66666667%;
}
}
@media (min-width: 1201px) {
.col {
width: 8.33333333%;
}
}
显示的样式效果：
3. less基础
3.1 css 存在的问题
CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
- CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
- 不方便维护及扩展，不利于复用。
- CSS 没有很好的计算能力
- 非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代 码项目。
3.2 Less 介绍
Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。
做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语 言的特性。
它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编 写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事 情。
Less中文网址：http://lesscss.cn/
一句话：Less是一门 CSS 预处理语言，它扩展了CSS的动态特性。
3.3 Less安装
- 安装nodejs，网址：http://nodejs.cn/download/
- 检查是否安装成功，使用cmd命令（win10是window+r 打开运行输入cmd） —输入“node –v”查看版 本即可
- 基于nodejs在线安装Less，使用cmd命令“npm install less”即可
3.4 为什么要使用LESS？
- LESS支持创建更清洁，跨浏览器友好的CSS更快更容易。
- LESS是用JavaScript设计的，并且创建在 live 中使用，其编译速度比其他CSS预处理器更快。
- LESS保持你的代码以模块化的方式，这是非常重要的，通过使其可读性和容易改变。
- 可以通过使用LESS 变量来实现更快的维护。
3.5less编写和编译
先创建 .less 文件，然后将其编译成最终使用的css文件，因为 html 文件只能引入 css 文件
每次更新less文件后，需要重新编译成css文件
编写
@color:orange;
body {
background-color: @color;
}
.box {
width: 200px;
height: 200px;
background-color: @color;
}
编译
安装 vs code 插件 easy less
在 .less 文件中保存代码，就会自动生成同名的 css 文件
在 html 文件中引入 css 文件即可
3.5 less 语法
3.5.1 Less 使用之变量
变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
@变量名:值;
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
- less允许定义变量到全局样式中复用
3.5.2 less嵌套
- 它是一组 CSS 属性，允许将一个类的属性用于另一个类，并且包含类名作为其属性。
- 在 LESS 中，可以使用类或 id 选择器以与 CSS 样式相同的方式声明 mixin。
- 它可以存储多个值，并且可以在必要时在代码中重复使用。
- Mixins代表的是一种特性是一种混入继承模式，当使用less语法实现css时我们也可以实现这样的模式
例如：
.swipe{
position: relative;
overflow: hidden;
li{
position: relative;
float: left;
overflow: hidden;
}
img{
width: 100%;
max-width: 750rem/50;
}
}
如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接
a:hover{
color:red;
}
a{
&:hover{
color:red;
}
}
3.5.3 less 运算
LESS支持一些算术运算，例如加号(+)，减号( - )，乘法(*)和除法(/)，它们可以对任何数字，颜色或变量进行操作。 操作节省了大量的时间，当你使用变量，让感到就像是简单的数学工作
/*Less 里面写*/
@witdh: 10px + 5;
div {
border: @witdh solid red;
}
/*生成的css*/
div {
border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;
- 乘号（*）和除号（/）的写法
- 运算符中间左右有个空格隔开 1px + 5
- 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
- 如果两个值之间只有一个值有单位，则运算结果就取该单位
3.5.4 less 注释
注释的适当使用可以保证代码的可读性，Less 支持两种类型的注释：多行注释和单行注释。
注释使代码清晰，并允许用户轻松地理解。 您可以在代码中使用块样式和行内注释，但是当编译LESS代码时，单行注释不会显示在CSS文件中。
less 文件
.col {
padding: 10px 0;
background-color: #000;
box-sizing: border-box;
//border: 1px solid #000;
}
/* .col img{
width: 100%;
height: 100%;
} */
转义的 css文件
.col {
padding: 10px 0;
background-color: #000;
box-sizing: border-box;
}
/* .col img{
width: 100%;css
height: 100%;
} */
3.5.5 Less 导入
“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：
@import "library"; // library.less
@import "typo.css";
3.5.6转义
转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation。
less的写法
@m123: ~"(min-width: 768px)";
.element {
@media @m123 {
font-size: 20rem;
}
}
转义后的css
@media (min-width: 768px) {
.element {
font-size: 20rem;
}
}
注意，从 Less 3.5 开始，可以简写为：
@min768: (min-width: 768px);
.element {
@media @min768 {
font-size: 1.2rem;
}
}
在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况就不再需要了。
4. rem适配方案
-
让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
-
使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html 字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。
技术方案：
- less+rem+媒体查询
- flexible.js+rem
总结：
两种方案现在都存在。
方案2 更简单，现阶段大家无需了解里面的js代码。
4.1 rem实际开发适配方案
- 假设设计稿是750px
- 假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
- 每一份作为html字体大小，这里就是50px
- 那么在320px设备的时候，字体大小为320/15就是 21.33px
- 用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
- 比如我们以750为标准设计稿
- 一个100100像素的页面元素在 750屏幕下， 就是 100/ 50 转换为rem 是 2rem2rem 比例是1比1
- 320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例 还是 1比1
- 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
总结：
①最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
②屏幕宽度/划分的份数就是 htmlfont-size 的大小
③或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小
448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
