一.视口
视口：用来约束html，html和设备的大小进行适配
(注释视口)
添加视口
二倍图
概念:设计稿里面每个元素的尺寸的倍数
作用:防止图片在高分辨率屏幕下模糊失真
可以使用pxcook
如果我们的原图大小是设计图的两倍,可以使用pxCook去原图抓取到设计图的大小
开发====>两倍===>设计
三.适配方案
宽度适配: 宽度自适应
百分比布局
flex布局
等比适配:宽高等比缩放
rem,是相对单位,相对于HTML标签的字号计算结果
1rem =1 HTML字号大小
如何知道屏幕尺寸，从而知道html字体大小
因为rem是相对html里面的字体大小来改变尺寸
所以你想要实现适配，根据html的尺寸来设置html里面的字体大小
如何知道屏幕尺寸，从而知道html字体大小
运行结果:
rem-flexible.js
flexible.js 是手淘开发出的一个用来适配移动端的js 库。
核心原理就是根据不同的视口宽度给网页中 html根节点设置不同的iont-size。
引入js文件
核心原理： 通过js来获取视口的宽度，然后设置html里面的字体大小
rem终极方案
1.引入js文件
2.给盒子设设置rem尺寸
1.rem值的计算-px转rem
1.确定设计稿的尺寸(375px),等分成10份,其中一份37.5
将设计稿的px/37.5就等于rem的值
下载一个px2rem的插件,然后把设计搞得1/10的大小写进去,在页面中就会帮你自动转换
运行结果:
在调试的时候,你要改成你设计稿的大小
2.vm
相对视口尺寸计算结果
vw: viewport width
1vw = 1/100视口宽度
vh:viewport height
1vh = 1/100视口高度
### 2,px转vw
px转vw --> 确定视口的大小(375),将视口大小等分成100份
将设计图的尺寸 / 3.75 得到vw的值
四.总结
本章主要学习了移动端开发中,如何从把网页中的图片大小转换成移动端的图片大小,以及移动端中如何将网页端的px单位转成移动端的单位方法,以及在vscode中用到的一些插件