移動端適配單位rem

時間 2019-11-07

標籤移動適配單位 rem 欄目無線简体版

原文原文鏈接

0 寫在前面

　　本週驚喜地發現，其餘各個老師的軟工班（羅傑老師班和歐陽老師班）的軟工項目的alpha版本都已經發布了！（然而咱們軟工項目還沒開始寫代碼…逃…）html

　　十分好奇的我第一時間下載了一些他們的產品進行體驗，因爲我是在手機上打開的他們的項目，一些基於web端開發的產品在前端效果上看起來有些古怪。進而發現，多是在各個項目組的開發過程當中，沒有將移動端的適配問題考慮在內。
前端

　　因爲手機網絡的普及，愈來愈多的用戶開始使用移動端產品，所以在產品的開發和設計時，有必要考慮移動端的適配問題。web

　　今天我講經過這篇文章來記錄一下移動端適配單位rem的學習筆記。瀏覽器

1 基本知識點

邏輯像素： CSS像素網絡
物理像素：設備出廠時即被設定好的（也叫設備像素）iphone
設備像素比dpr = 物理像素/CSS像素學習

2 rem & em

em：字體
- font-size的值相對於父級字體大小ui
- width，height的值相對於自身字體大小spa
- 谷歌瀏覽器限制最小字體大小爲12px若設置低於12px則字體大小按12px計算
rem:相對於跟標籤html的font-size值

3 屏幕尺寸

640 * 1136 -> 物理像素
- eg: iphone5 dpr = 2
- 一個div在設計稿裏的實際寬度200px -> 100px
320 * 568 -> CSS像素
一列佔：320 / 16 (總列數：本身設置) = 20px (每列佔的CSS像素)
一個div元素所佔列數 = 100px / 20px = 5rem

4 總結

元素適配寬度 = 元素所佔列數rem
一列的寬度 = 屏幕實際寬度 / 總列數
元素實際列數 = 元素在設計稿裏的寬度 / 一列的寬度

5 示例代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>rem</title>
 8     <style>
 9         html{
10             font-size: 20px;
11         }
12         div{
13             /* CSS像素 ：邏輯像素*/
14             height: 90px;
15             width: 90px;
16             background-color: red;
17             /* 物理像素：設備出廠時即被設定好的（也叫設備像素） */
18             /* 設備像素比dpr = 物理像素/CSS像素 */
19         }
20         .demo{
21             font-size: 16px;
22         }
23         .demo .em{
24             /* 相對於父級字體大小 */
25             font-size: 2em;
26             width: 3em;
27             height: 3em;
28         }
29         .demo .rem{
30             font-size: 2rem;
31             width: 5rem;
32             height: 5rem;
33             background-color: aqua;
34         }
35     </style>
36 </head>
37 <body>
38     <!--
39         rem&em
40         em：1. font-size的值 相對於父級字體大小
41             2. width height的值 相對於自身字體大小
42         注意：谷歌瀏覽器限制最小字體大小爲12px若設置低於12px則字體大小按12px計算
43         rem:相對於跟標籤html的font-size值
44     -->
45     <!--屏幕尺寸
46         640 * 1136 -> 物理像素 
47         eg: iphone5 dpr = 2
48         一個div在設計稿裏的實際寬度200px -> 100px 
49         320 * 568 -> CSS像素
50 
51         一列佔：320 / 16 (總列數：本身設置) = 20px (每列佔的CSS像素)
52         一個div元素所佔列數 = 100px / 20px = 5rem
53 
54         1. 元素適配寬度 = 元素所佔列數rem
55         2. 一列的寬度 = 屏幕實際寬度 / 總列數
56         3. 元素實際列數 = 元素在設計稿裏的寬度 / 一列的寬度
57     -->
58         
59     <div class="demo">
60         <p class="em">好好學習</p>
61         <div class="rem">每天向上</div>
62     </div>
63 </body>
64 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。