em,rem的原理
em与rem
- 浏览器文本的默认字号，通常是16px
- 一般可以用作设置响应式的文本字号
- 设置盒模型响应式属性
rem是固定值的em- 边框不能用em或者rem，要用px
rem取的html字号；em取得父级字号
em应用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>em响应式按钮</title><style>.btn{/* 背景颜色 */background-color: #ff6801;/* 字体颜色 */color: #fff;/* 去掉边框 */border:none;/* 去掉单机轮廓线 */outline: none;/* 内边距 */padding: 0.5em 1em;border-radius: 0.3em;}/* 鼠标移上悬停效果 */.btn:hover{/* 透明度 */opacity: 0.8;/* 将鼠标设置为手型 */cursor: pointer;/* 阴影效果 */box-shadow: 0 0 3px #888;/* 阴影效果延时 */transition: 0.3s;}.small{font-size: 10px;}.normal{font-size: 16px;}.larger{font-size: 22px;}</style></head><body><button class="btn larger">Button</button><button class="btn normal">Button</button><button class="btn small">Button</button></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{font-size: 1.25em;}h2{font-size: 1.5rem;}h2 span{font-size: 1rem;}</style></head><body><h2>PHP中文网<span>php.cn</span></h2></body></html>
rem/em/vh/vw的区别与联系
vh与vw
- 视口单位，视口，浏览器的可视区域，但不包括地址栏、菜单栏、工具栏、状态栏
- vh视口的初始包含快的高度的百分之一
- vw视口的初始包含快的宽度的百分之一
- 移动端布局使用最多
- vmin/vmax 可视口最小/最大
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>视口单位: vmin, vmax</title><style>.box {width: 80vmin;height: 80vmin;background-color: lightgreen;margin: auto;}/* .box {width: 80vmax;height: 80vmax;background-color: lightgreen;margin: auto;} */</style></head><body><div class="box"></div></body></html>
总结：em,rem,vh,vw都是相对大小，不是绝对大小，em是相对于父元素的字体大小，rem是相对于根元素(html)的字体大小，vh是相对于视口高度的百分比,vw是相对于视口的宽度百分比，可以使用vmax,vmin限定元素的指定大小。