收藏
天蓬老师批改状态：合格
老师批语：
rem是固定值的emrem取的html字号；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>
<!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>
<!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限定元素的指定大小。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
