
批改狀態(tài):合格
老師批語:
1、當(dāng)使用 rem 單位,他們轉(zhuǎn)化為像素大小取決于頁根元素的字體大小,即 html 元素的字體大小。 根元素字體大小乘以你 rem 值。
2、當(dāng)使用em單位時(shí),像素值將是em值乘以使用em單位的元素的字體大小。em的值是相對(duì)于使用em單位的元素的字體大小;如果當(dāng)前元素沒有設(shè)置字體大小,則em默認(rèn)繼承父級(jí)的字號(hào)大小
3、em 和 rem都是靈活、 可擴(kuò)展的單位,由瀏覽器轉(zhuǎn)換為像素值,單em和rem的參考基準(zhǔn)值不同;
4、em和rem總結(jié):
1、視口單位vh、vw常用用于移動(dòng)端布局:通常是把視窗口的寬高按100份等分,單位即vh和vw;vh和vm總是與視口的高度和寬度有關(guān)。
2、與之不同的,vmin和vmax是與當(dāng)下屏幕的寬度和高度的最大值或最小值有關(guān),取決于哪個(gè)更大和更小
1、代碼
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>rem和em以及視口單位的使用</title>
<style>
/* html在谷歌瀏覽器下默認(rèn)字體字號(hào)為16px */
.one span{
font-size:1.5rem;//等于24px,rem的值是以根元素的字體大小為基準(zhǔn)的
}
.two{
font-size:2rem;//等于32px
}
.two span{
/* 繼承父級(jí)的字體字號(hào)大小 等同與設(shè)置了font-size:2rem;也就是字號(hào)設(shè)置32px*/
width: 10em;//10*32px=320px; em的值是以使用em元素的字體大小為基準(zhǔn)值的,如果元素沒有設(shè)置字體大小的值則繼承父級(jí)的字體的值
padding:0 1em;;
background-color: #42B983;
}
.three{
font-size:2em;//實(shí)際字號(hào)大小:2*16px=32px;
}
.three span{
font-size:2em;//實(shí)際字號(hào)大小:2*32px=64px;
}
/* 通常設(shè)置字體用rem,設(shè)置寬、高、margin、padding用em;但設(shè)置邊框強(qiáng)烈建議使用px; */
.window{
/* 移動(dòng)端布局通過視窗的vh和vw來設(shè)置盒子的自適應(yīng)寬高 */
width: 50vw;
height:50vh;
background-color: lightcyan;
margin:0 auto;
position:relative;
}
.win{
/* 通過vmin和vmax來設(shè)置盒子的寬高,通過vmin設(shè)置寬高,總以最短的邊來設(shè)置寬高,而vmax則是以最長的來設(shè)置寬高 */
width: 25vmax;
height:25vmax;
padding: 1vw 1vh;
background-color: lightgreen;
position: absolute;
top:0;
left: 0;
bottom:0;
right:0;
margin:auto;
}
.w{
width: 15vmin;
height:15vmin;
background-color: red;
position: absolute;
top:0;
left: 0;
bottom:0;
right:0;
margin:auto;
}
</style>
</head>
<body>
<div class="one">
<span>種業(yè)圈</span>
</div>
<div class="two">
<span>種業(yè)圈</span>
</div>
<div class="three"><span>種業(yè)圈</span></div>
<div class="window">
<div class="win">
<div class="w">
</div>
</div>
</div>
</body>
</html>
2、運(yùn)行結(jié)果:
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)