分辨率
1 移动web参照逻辑分辨率
2 视口标签作用：规定html网页作用用的，可以显示为100% 如果没有则web宽度为980px （默认，布局视口）， pc端为屏幕分辨率
百分比布局：
也称流式布局，宽度自适应（100%），高度固定（写死）
img/屏幕截图 2022-03-17 105120.jpg
将toolbar固定位置
解决屏幕图片清晰度的问题
pc 端 1倍图
iPhone se 2倍图
iPhone 12 pro 3倍图
语法：
<body>
<img srcset="./images/1.jpg 1x, ./images/2.jpg 2x, ./images/3.png 3x" />
</body>
srcset属性很少用
图片后面乘的倍数就是多少倍图
移动端布局和pc端布局区别
pc 端
1 定版心
2 页面中的元素宽度和高 几乎都是使用px 单位 定死大小
移动端
1 不会定版心
2 元素大小 很少使用px 单位，都会使用 相对长度单位 百分比单位
ren vw vh（没有学过）
3 早期移动端布局
百分比布局（流式布局）
主流移动端布局方案
flex布局
flex布局使用及注意事项
1 设置 div 变成 flex 盒子 弹性flex
display：flex； 简写 df
2 div 中的子元素 发生一些改变
1 设置了flex的盒子 称之为 父项
2 盒子里面的子元素 称之为 子项
3 具体变化
1 不再区分什么 块级、行内、行内块 全部都可以设置宽度和高度
2 子项 默认的宽度和高度
宽度 由内容撑开
高度 等于父项的高
3 子项
使用浮动没有效果
使用 定位、margin、transform 都有效（比较少的使用这些技术，都是传统的布局技术）
4 默认情况下 子项总宽度大于 父项的宽
也不会换行！！ flex不会换行 只会压缩自身的宽度而已
img/58d8e9cece7fb3d3e59d0e1bedc87d2.png
