概述:
页面响应式用 rem 实现【根据设备屏幕宽度改变根元素fontsize】,设备自适应用 媒体查询 实现【根据设备屏幕宽度控制哪些样式class生效】
媒体查询实现:【页面结构需要变化时使用】
1、link元素中的CSS媒体查询【一般用于Js项目】
2、样式表中的CSS媒体查询【一般用于Vue项目】
@media screen and (min-width:901px){
body {
background-color: red;
}
}
@media screen and (max-width:900px){
body {
background-color: green;
}
}
rem原理:
百分比布局可实现响应式布局,而rem相当于百分比布局。无论设备可视窗口如何变化,始终设置rem为width的1/n,即实现了百分比布局。
rem公式:
方案一:1rem=100px【方便计算】
html.fontSize = 1rem = 设备屏幕宽度/(设计稿宽度/100),
1、分析阶段 --- 让设备屏幕宽度等于设计稿宽度,则1rem=100px,此时方便计算、编写设计稿元素宽度对应的rem。
2、执行阶段 --- 让设备屏幕宽度等于Js获取的设备屏幕宽度
方案二:1rem = 设计稿宽度/份数【需使用cssrem插件来方便计算】
1、分析阶段 --- html.fontSize = 1rem = 设计稿宽度/份数
2、执行阶段 --- html.fontSize = 1rem = 设备屏幕宽度/份数
3、页面元素的rem:nrem = 设计稿元素宽度/1rem
rem实现:
1、分析阶段,先根据设计稿宽度px计算1rem,再根据设计稿元素宽度px计算、编写页面元素的rem
2、执行阶段,Js先自动根据设备屏幕宽度计算1rem,再将1rem对应的px赋值给Html的fontsize,再根据编写好的页面元素的rem,计算实际页面元素的px
rem工具:
分析阶段:cssrem插件,把页面元素px自动计算成rem。需先在VSCode的配置文件中,根据设计稿宽度px计算1rem。
执行阶段:flexible.js库,将设备屏幕宽度分成了10份,根据设备屏幕宽度自动计算1rem。【Js项目在head中引入,Vue项目在main.js中引入】