移動端頁面使用rem來作適配

移動端頁面使用rem來作適配

rem介紹

rem（font size of the root element）是指相對於根元素（即html元素）的字體大小的單位。
假設根元素的字體大小是10px, 則5rem的大小爲 5*10=50px,例如

1 html{
2 font-size: 10px;
3 }
4 width: 2rem; /* 2*10 = 20px;*/
5 margin: 1rem;
6 }
7 img{
8 width:.6rem;
9 ｝

 

rem來作適配

之前咱們每每這樣作頁面：viewport width 設置爲 device-width，而後選咱們須要兼容設備的最小寬度（通常是320px）。根據這最小寬度來作頁面。單位使用px和百分比。在寬度不一樣的設備上，頁面的字體大小，內容尺寸都是同樣的，不一樣的是，大屏的內容間的空隙比小屏的大。因此這樣作的缺點就是，頁面在某些尺寸的設備上顯示的效果很差。

若是用rem來頁面，咱們會根據不一樣的設備寬度在根元素上設置不一樣的字體大小。寬度越寬，字體越大。而後對本來使用px的地方使用rem來替換。這樣，字體大小，內容尺寸，對隨着屏幕寬度的變大而變大。

具體作法

1 根據不一樣的設備寬度在根元素上設置不一樣的字體大小。
爲了能將設計稿中的 px 方便的轉換爲頁面中 rem，我設置 1rem 爲 寬度爲 640px 的設計稿中的 100px。

2 作頁面時
將設計稿的寬度縮放至 640px。在上一步中，1rem 爲此時設計稿中 100px 的值。屏幕的寬度也就是 (640 / 100) = 6.4rem）

 

 

時刻鼓勵本身：

 

       埋頭讀書，擡頭作人!

 

　　不登高山不知天之高也，不臨深溪不知地之厚也

 

　　懦弱的人只會裹足不前，莽撞的人只能引爲燒身，只有真正勇敢的人才能所向披靡

 

　　咱們這個世界，從不會給一個傷心的落伍者頒發獎牌。

 

　　海浪的品格,就是無數次被礁石擊碎又無數閃地撲向礁石、

 

　　鞋底磨穿了，不等於路走到了頭。

 

　　鬆馳的琴絃，永遠奏不出時代的強音。

 

　　躺在被窩裏的人，並不感到太陽的溫暖。

 

　　不安於現狀，不甘於平庸，就可能在敢於進取的奮鬥中奏響人生壯美的樂間。

 

　　不去耕耘，不去播種，再肥的沃土也長不出莊稼，不去奮鬥，不去創造，再美的青春也結不出碩果。

　　(小小小尾巴/原創）