移动适配——vw / vh

移动适配——vw / vh、

使用vw单位设置网页元素的尺寸，实现在不同宽度的设备中，网页元素尺寸等比例缩放 相对单位
vw：viewport width 视口的宽 1vw = 当前屏幕宽度的1/100
vh：viewport height 视口的高 1vh = 当前屏幕高度的1/100
例如: 屏幕宽 375px 1vw = 3.75px
屏幕高 667px 1vh = 6.67px

开发中，vw he wh 不会混用，vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形，开发中推荐使用 vw

媒体查询

媒体查询在书写时,注意顺序(防止css的层叠性进行覆盖)
768以下表示移动端 992以上表示平板电脑 1200以下表示PC端(中屏) 1200以上表示PC端(大屏)
max-width 最大值不能超过这个值
min-width 最小值不能小于这个值

1、媒体查询——显示与隐藏

例：默认显示3个盒子,在800以下隐藏第一个盒子

2、响应式布局

通过媒体查询检测屏幕宽度,更改盒子的宽度,从而影响盒子在页面的摆放顺序就是响应式布局。

3、媒体查询——外链式