移动布局前置知识点-单位/视口
1. 长度单位
- px
- 百分比
- em
- rem
- vw/vh
1.1 px像素
定义：是指在由一个数字序列表示的图像中的最小单位。
在前端开发中视口的水平方向和垂直方向是由很多小方格组成的，一个小方格就是一个像素。
例如div尺寸是100*100(px)，那么水平方向就占用100个小方格，垂直方向就占用100个小方格。
像素特点
不会随着视口大小的变化而变化，像素是一个固定的单位(绝对单位)。
1.2 百分比
百分比是前端开发中的一个动态单位, 大部分都是以当前元素的父元素作为参考进行计算。
例如父元素宽高都是200px, 设置子元素宽高是50%, 那么子元素宽高就是100px。
百分比特点
- 子元素高度是参考父元素高度计算的
- 子元素padding无论是水平还是垂直方向都是参考父元素宽度计算的
- 子元素margin无论是水平还是垂直方向都是参考父元素宽度计算的
- 不能用百分比设置元素的border
1.3 em相对单位
em是前端开发中的一个动态单位，是一个相对于元素字体大小的单位
例如：font-size：12px，那么1em就等于12px
em特点
- 当前元素设置了字体大小, 那么就相对于当前元素的字体大小
- 当前元素没有设置字体大小, 那么就相当于第一个设置字体大小的祖先元素的字体大小
- 如果当前元素和所有祖先元素都没有设置大小, 那么就相当于浏览器默认的字体大小
结论: em是一个动态的单位, 会随着参考元素字体大小的变化而变化(相对单位)
1.4 rem相对(绝对)单位
rem就是root em, 和em一样是前端开发中的一个动态单位。
rem和em的区别在于, rem是一个相对于根元素(html)字体大小的单位
例如 根元素(html) font-size: 12px; ,那么1em就等于12px
rem特点
- 除了根元素以外, 其它祖先元素的字体大小不会影响rem尺寸
- 如果根元素设置了字体大小, 那么就相对于根元素的字体大小
- 如果根元素没有设置字体大小, 那么就相对于浏览器默认的字体大小
结论: rem是一个动态的单位, 会随着根元素字体大小的变化而变化(相对单位)
1.5 vw和vh
vw和vh是前端开发中的一个动态单位, 是一个相对于网页视口的单位
系统会将视口的宽度和高度分为100份,1vw就占用视口宽度的百分之一, 1vh就占用视口高度的百分之一
vw/vh 和 百分比 不同的是, 百分比一般都是以父元素作为参考。
结论: vw/vh是一个动态的单位, 会随着视口大小的变化而变化(相对单位)
延伸_vmin和vmax?
vmin：vw和vh中较小的那个
vmax：vw和vh中较大的那个
使用场景：保证移动开发中屏幕旋转之后尺寸不变。
2. 视口
概念：是一个区域，网页可看到的区域，也就是html网页显示的区域。
作用：
- 约束html文档大小
- html文档内容超过了视口大小便会产生滚动条
pc端视口大小等于浏览器窗口大小
移动端默认视口980px （横向宽度）
2.1 980px的由来
因为过去网页的版心都是980
乔老爷子为了能够让网页在移动端完美的展示, 所以将iOS手机视口的大小定义为了980
后来谷歌也觉得这是一个非常牛X的方案, 所以Android手机的视口也定义为了980
移动端自动将视口宽度设置为980带来的问题
虽然移动端自动将视口宽度设置为980之后让我们可以很完美的看到整个网页
但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的
所以为了能够在较小的范围内看到视口中所有的内容, 那么就必须将内容缩小
2.2 设置网页在移动端不自动缩放
在head标签里添加一下内容(建议背下)
1 | <meta name="viewport" content="width=divice-width, initial-scale=1.0" > |
- width=device-width 设置视口宽度等于设备的宽度
- initial-scale=1.0 初始缩放比例，1不缩放
- maximum-scale 允许用户缩放到的最大比例
- minimum-scale 允许用户缩放到的最小比例
- user-scalable 用户是否可以手动缩放
拓展：viewport-fit:contain或cover，视口适配，兼容带刘海的屏幕。
