em、rem的原理与应用场景、rem/em/vh/vw区别于联系
1.em、rem的原理与应用
- 1.px是固定像素，一旦设置了就无法因为适应页面而改变
- 2.em和rem相对于px更具有灵活性，因为它们长度不是定是的，更适用于响应式布局
- 2-1.em和rem的区别一句话概括：em相对于父元素，rem相对于html根元素
- 2-2.rem中的r意思是root（根源）
em盒子模型应用:
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>em的原理与应用</title><style>html {font-size: 20px;}/* 盒子模型的响应式 */body:first-of-type div:first-of-type {/* 1em = 20px */font-size: 1em;/* 10em * 20px = 200px */width: 10em;/* 8em * 20px = 160px */height: 8em;background-color: skyblue;}/* 因为盒子大小使用了em，所以后面只需要设置字号就可以响应式改变盒子的大小 */body:first-of-type div:first-of-type {font-size: 0.8em;}</style></head><body><div></div></body></html>
演示截图:
rem定义字号应用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>rem定义字号</title><style>html {/* em的初始值就是（浏览器）用户代理的值，默认就是16px *//* 1em = 20px */font-size: 1.25em;/* 此时 1em = 20px *//* 当font-size出现在了html中 *//* html叫根元素，一个页面中它是唯一的最大的包含块 *//* 所以在html根元素中定义的em大小，可以看成是一个常量，固定的值 *//* html所有后代元素，如果想引用html中的字号，就不能 再用em了 *//* 因为em具有继承性 *//* 此时我们用一个关键词来引用根元素中的字号大小font-size的值 *//* 这个关键词就是：rem */}h1 {/* 1.5rem :1.5 * 20px = 30px */font-size: 1.5rem;}h1 span {/* 1 * 20px =20px */font-size: 1rem;}</style></head><body><h1>hello world <span>你好</span></h1></body></html>
演示截图
2.rem / em /vh/ vw的区别与联系
- rem继承根html字号相对字号的固定值
- em引用当前盒子或继承父级元素或祖先元素的font-size设置，如果都没有设置，则继承html根的字号设置
- vh/vw视口单位，视口意思就是浏览器的可视区域，不包括地址栏、菜单栏、工具栏、状态栏
- vh视口的初始包含块的高度百分之一(1/100)
- vw视口的初识包含块的宽度百分之一(1/100)
- 视口单位值按视口大小等比改变，主要用于移动端布局
- vmin/vmax可视口最小/最大
- width:80vmin / height:80vmin （无论怎么变换页面都是正方形）
- width:80vmax / height:80vmax 手机横屏应用
