module4-05-rem布局-媒体查询-less基础
一、rem布局
1.1 思考
（1）页面布局文字能否随着屏幕大小变化而变化？
（2） 流式布局和flex布局主要针对与宽度故居，那高度如何设置？
-
通过设置固定值而进行布局
-
所以设置rem布局的话可以让屏幕发生变化的时候元素高度和宽度等比例缩放
（3）技术选型
1.2 rem单位
-
rem是一个相对定位，类似于em，em是相对于父元素字体大小
-
rem是相对于<html>元素的字体大小
-
优势：父元素的文字大小可能不一致，单页面只有一个html，可以很好的控制整个页面的元素大小比例
二、媒体查询
媒体查询（Media Query）是CSS3新语法
-
使用@media查询，可以针对不同的媒体类型定义不同的样式
-
@media可以针对不同的屏幕尺寸设置不同的样式
-
当你充值浏览器大小的过程中，页面也会根据浏览ide宽度和高度重新渲染页面
-
目前针对很多苹果手机，安卓手机，平板等设备idou用得到多美的查询
2.1 语法规范
-
用@media开头，注意@符号
-
mediatype媒体类型
-
值 解释说明 all 用于所有设备 print 用于打印机和打印预览 screen（常用） 用于电脑屏幕，平板电脑，智能手机 -
-
-
关键字
-
and：”且“
-
not：排除某个类体类型 ”非“
-
or：可以测试多个媒体查询的条件，“或”
-
only：指定某个特定的媒体类型，可以省略
-
-
media feature 媒体特征 必须有小括号包含
-
值 解释说明 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度 -
-
-
建议从小写到大
@media screen and (max-width: 319px) {...}
@media screen and (min-width: 320px) {...}
@media screen and (max-width: 540px) {...}
@media screen and (max-width: 970px) {...}
2.2 媒体查询 + rem实现元素动态大小变化
-
rem单位是跟着<html>来走的，有了rem页面元素可以设置不同大小尺寸
-
媒体查询可以根据不同设备宽度来修改样式
-
媒体查询 + rem就可以实现不同设备宽度，实现页面元素大小的动态改变
2.3 引入资源
-
可以在link标签引入样式的时候就设置media
<link rel="stylesheet" media="screen and (max-width: 319px;)">
2.4 flexible.js
-
已经处理过媒体查询
-
原理是把设备分为10等份，不同设备下，比例还是一致的
-
只需要自行初始化html的字号就行了
@media screen and (min-width: 750px) {
html {
font-size: 75px !important;
}
}
-
可以通过VScode插件cssrem进行rem计算
-
要设置插件的基础字号，然后重启VScode
-
2.5 总结
-
后面可以使用cssrem + less的方法同时进行计算
三、less
3.1 维护css的弊端
CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念
-
CSS需要书写大量看似没有逻辑的代码，CSS冗余程度比较高
-
不方便维护及扩展，不利于服用
-
CSS没有很好的计算能力
-
非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目
3.2 less的安装
-
npm install -g less
-
lessc -v
3.3 Less的使用
（1）Less变量
-
变量是指没有固定的值，可以动态改变的。因为我们CSS中的一些颜色和数值等经常使用
-
@变量名：值；
（2）Less编译
-
less自己有一套解析器来解析自己的语法，解析完成之后生成css文件
-
可以使用nodejs：lessc style.less > style.css
-
VScode插件: Easy Less
（3）Less嵌套
-
用&
-
比如伪类选择器
.box {
&:hover {...}
}
（4）Less运算**
-
任何数字、颜色或者变量都可以参与运算。Less提供了加减乘除
-
单位选择：
-
选取第一个单位或者唯一的那个单位
-
width: 200rem / 20px=>width: 10rem
-
-
运算中也可以使用变量
-
运算符左右必须加空格(包括颜色)
（5）rem实际开发适配方案
-
动态设置html标签font-size大小
-
元素大小取值方法
-
① 主页面元素的rem值 = 页面元素值（px => 也就是设计稿的真实大小）/（屏幕亮度 / 划分的份数）
-
② 屏幕宽度 / 划分的份数 就是html font-size的大小
-
③或者: 页面元素的rem值 = 页面元素(px) / html font-size字体大小
-
-
