今日学习内容

• 布局

1. 圣杯布局  上下固定中间自动
2. 双飞翼布局  左右固定 中间自动
3. 响应式布局  根据用户的行为或浏览器窗口或者设备型号的不同而改变新的布局排版
4. 固定布局 有固定的尺寸，当浏览器窗口缩小时以滚动条形式去显示
5. 百分比布局（弹性布局）：左右固定的中间自动
6. 等比缩放布局（rem布局）：能够随着变大而变大，缩小而缩小

• 名称解释

屏幕尺寸：屏幕对角线的长度

屏幕分变率：横纵方向上的像素点数

屏幕像素密度：单位尺寸中显示的像素点数  单位ppi

视网膜屏幕：像素密度比平时的要高，人们用肉眼很难分辨

DPR：设备像素比  设备像素和css像素的比值

如何查看DPR----在浏览器中f12——查看console——输入d

• 单位问题

Px 像素具体数值

Em 根据离其最近的父元素的font-size计算

Rem 根据根标签html的font-size计算

Vw 设备视窗宽度的百分比  1vw = 窗口宽度的百分之一

Vh 设备视窗高度的百分比  1vh = 窗口高度的百分之一

Vmax  宽高百分比中较大值

Vmin 宽高百分比较小值

• 单位计算

如果html的font-size设置为vw的话，下边所有的单位都设置成rem就会随着窗口的变化而变化

如果html的font-size设置为100px，如果div的是44px那么他等于多少rem

1rem=100px   44px=0.44rem

想办法将100px转化成vw？

如果将页面放在在320的屏幕上去看，那么1vw=3.2px；

100px里有多少个3.2就是多少vw  100/3.2=31.25vw