rem
學習使用
rem
認識
- rem是相對單位(r 意思
root
根元素,html
標籤),大小是基於html
元素的字體大小 - em大小是基於
父元素
的字體大小
<!DOCTYPE html>
<html lang="en" style="font-size: 60px">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
padding: 0;
line-height: 1;
font-size: 50px;
}
.em{
/*基於父元素爲body,實際大小爲100px*/
font-size: 2em;
}
.rem{
/*基於root 根元素,html標籤,實際大小爲120px*/
font-size: 2rem;
}
</style>
</head>
<body>
<div class="em">AAAAA</div>
<div class="rem">AAAAA</div>
</body>
</html>
rem
適配
移動端適配總結
- 伸縮佈局 flex
- 流式佈局 百分比
- 響應佈局 媒體查詢 (超小屏設備的時候:流式佈局)
rem
佈局
共同點:元素只能做寬度的適配(排除圖片)
適配方案rem:寬度和高度都能做到適配(等比縮放)
rem
佈局,通過控制html
上的字體大小去控制頁面上所有已rem
爲單位的基準值控制尺寸
- 把頁面上
px
單位轉換成rem
單位 - 頁面製作的時候
psd
上的量取的px
轉成rem
使用
px
轉換rem
- 預設一個基準值 方便計算
100px
- 適配的時候設置基準值
320px 50px
怎麼算:(·640px 100px ===320px 50px·) - 換算公式:當前rem基準值 = 預設的基準值 / 設計稿寬度 * 當前設備的寬度 (設計稿寬度/當前設備的寬度 = 預設的基準值 / 當前rem基準值)
- 怎麼去改變 (js換算,媒體查詢推薦)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<style>
/*假設的設備 320px 414px 640px */
@media (min-width: 320px) {
html{
font-size: 50px;
}
}
@media (min-width: 414px) {
html{
font-size: 64.6875px;
}
}
@media (min-width: 640px) {
html{
font-size: 100px;
}
}
body{
margin: 0;
padding: 0;
font-size: 14px;
}
/*流式容器*/
header{
width: 100%;
height: 1rem;
line-height: 1rem;
font-size: 0.32rem;
text-align: center;
background: green;
color: #fff;
}
</style>
</head>
<body>
<header>購物車</header>
</body>
</html>