less+rem+媒体查询

1、rem

问题：
1、页面布局文字能否随屏幕大小变化而变化
2、流式布局和flex布局主要针对于宽度布局，那高度如何设置
3、怎么让屏幕发生变化的时候元素高度和宽度等比例缩放

rem基础：

• rem（root em）是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。
• 比如，根元素（html）设置font-size=12px；非根元素设置width：2rem；则换成px表示就是24px；
• rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制

2、媒体查询

媒体查询（Media Query）是CSS3新语法
可以针对不同的屏幕尺寸设置不同的样式

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

mediatype媒体类型：

• all：用于所有设备

• print：用于打印机和打印预览

• screen：用于电脑屏幕，平板电脑，智能手机等

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

• and：可以将多个媒体特性链接到一起，相当于且的意思

• not：排除某个媒体特性，相当于非的意思，可以省略

• only：指定某个特定的媒体类型，可以省略

媒体特性：每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。

• width：定义输出设备中页面可见区域的宽度

• min-width：定义输出设备中页面最小可见区域宽度

• max-width：定义输出设备中页面最大可见区域宽度

e.g： 这句话的意思就是：在我们屏幕上，并且最大宽度是800像素，设置我们想要的样式

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

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

引入资源：当样式比较繁多的时候，我们可以针对不同的媒体使用不同的stylesheets（样式表）。原理，就是直接在link中判断设备的尺寸，然后引入不同的CSS文件
语法规范：

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

3、Less基础：

维护CSS的弊端：
CSS是一门非程序式语言，没有变量、函数、作用域等概念需要书写大量看似没有逻辑的代码，冗余度比较高，不方便维护及扩展，不利于复用。CSS没有很好的计算能力

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

Less使用：首先新建一个后缀名为less的文件，在这个less文件里面书写less语句。
Less变量、Less编译、Less嵌套、Less运算

Less变量：变量是指没有固定的值，可以改变的，因为CSS中一些颜色和数值等经常使用。
@变量名:值;
变量名规范：必须有@为前缀、不能包含特殊字符、不能以数字开头、大小写敏感

Less编译：本质上Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件
所以需要把我们的Less文件，编译生成为css文件，这样我们的html页面才能使用
vscode Less插件：Easy LESS插件用来把less文件编译为css文件，安装完毕重新加载下vscode，只要保存一下less文件，就会自动生成CSS文件。

Less嵌套：子元素的样式直接写到父元素里面就好了
e.g

.header{
     
	width:200px;
	height:200px;
	background-color:pink;
	a{
     
		color:red;
	}
}

如果有伪类、交集选择器、伪元素选择器，我们内层选择器前面需要加&
e.g

a{
     
	color:red;
	&:hover{
     
		color:blue;
	}
}

Less运算：任何数字、颜色或者变量都可以参与运算
e.g

@width:10px + 5;
div{
     
	border:@width solid red;
}
/*生成的css*/
div{
     
	border:15px solid red;
}

一个less文件导入另一个less文件：

@import "common"

注意：

• 1、运算符中间左右有个空格隔开；
• 2、两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准；
• 3、两个数参与运算，如果两个数都有单位，而且不一样的单位，最后结果以第一个单位为准

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

• 1、按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小（媒体查询）

• 2、CSS中，设计稿元素的宽高相对位置等取值，按照同等比例换算为rem为单位的值

  技术方案1：less+媒体查询+rem
  技术方案2：flexible.js+rem（推荐）

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

动态设置html标签font-size大小：
1、假设设计稿是750px
2、假设我们把整个屏幕划分成15等份（划分标准不一，可以是20份也可以是10等份）
3、每一份作为html字体大小，这里就是50px
4、那么在320px设备的时候，字体大小为320/15就是21.33px
5、用我们页面元素的大小除以不同html字体大小会发现它们比例还是相同的
6、比如我们以750为标准设计稿
7、一个100100像素的页面元素在750屏幕下，就是100/50转换为rem是2rem2rem比例是1比1
8、320屏幕下html字体大小为21.33则2rem=42.66px，此时宽和高都是42.66但是宽和高的比例还是1：1
9、但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果

最后的公式：

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

• 屏幕宽度/划分的份数就是html font-size的大小

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