移动web适配

当屏幕宽度发生变化时，页面元素的尺寸（宽度和高度）也会随之变化，为更好的达到适配效果，用户体验更好，百分比布局 和 Flex布局 是有缺陷的，不能完成最终的适配。想要解决检测屏幕大小的问题，我们就需要使用媒体查询。

百分比布局：特点宽度自适应，高度固定

Flex布局：更多的解决了盒子的排列方式，高度很难适配

目前主流的两种方案—— rem 、vw/ vh

rem ： 目前多数企业在用的解决方案

vw / vh：未来的解决方案

一、em 和 rem 的区别

1em=1个字大小,默认是16px   相对单位

 

二、rem

rem单位：相对单位    rem单位是相对于HTML标签的字号计算结果

1rem = 1HTML字号大小

因此，我们只需要修改html 的文字大小，就可以完成元素大小的等比例缩放

目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

1、使用媒体查询设置差异化CSS样式

2、媒体查询配合rem

rem适配目标:实现在不同宽度的设备中,网页元素尺寸等比缩放的效果

例：盒子宽是 高 75px * 宽75px 的盒子(默认参考在标准稿375px) 并且要适配在375  414屏幕下适配

检测不同的视口,需要分别设置根字号(标准稿),在手机设备多,屏幕尺寸不一的情况下,视口不仅仅只有 375/414等...  使用flexible js 配合rem 能实现在不同宽度的设备中,网页元素尺寸成等比例缩放,方便快捷.

flexible.js 是手淘开发出的一个用来适配移动端的js库

 三、Less

在px单位转换到rem单位过程中,除法运算最麻烦(CSS不支持计算写法)。

使用Less运算写法可以完成px到rem单位的转换,浏览器不能直接识别less代码,目前网页需要引入对应的css文件.

1、less语法

① 除法需要添加小括号() 或 点·

 ② 使用less嵌套写法生成后代选择器

③ 使用Less嵌套写法快速生成后代选择器

&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

 

 ④ less的变量

 ⑤ less的导入

⑥ less的导出

生成一个新的 less文件,里面添加css样式, Ctrl+s 保存less文件,会自动生成一个css文件夹,并在里面生成一个css样式文件

⑦ less的禁止导出