首頁  >  文章  >  web前端  >  深入理解CSS中的rem以及行動端的佈局方法

深入理解CSS中的rem以及行動端的佈局方法

yulia
yulia原創
2018-09-17 16:15:081514瀏覽

 相信大家對px已經很熟悉了,但提到rem有些人就不知道了。今天這篇文章主要介紹什麼是rem,em,以及他們在行動端中的佈局方法,有需要的可以參考一下,希望對你有幫助。

一、rem是什麼?

rem是css3中新增加的一個單位屬性(font size of the root element),根據頁面的根節點的字體大小進行轉變的單位。 root! ! ! ! ! ! ! ! !根節點,也就是html。

範例:(下面範例中的根節點是html ,它的字體大小是100px,所以根節點下面的元素所設定的rem,都是1rem=100px。)
rem的初始值是16px,也就是說在沒有設定根節點的font-size的時候,1rem=16px

<html>
    <head>
        <style>
            html,body{ font-size: 100px;  }
            header{ height: 1rem;width: 1rem;  }  
        </style>
    </head>
    <body></body>
    <header></header>
</html>

二、em是什麼

##em也是相對單位,em單位是根據父元素的字體大小來進行轉變的單位。

1、em的值並不是固定的;
2、em會繼承父級元素的字體大小。

父節點

範例:

<header style="font-size:100px;">//父元素的字体大小是100px
    <div style="height:1em;width:1em;"></div>//所以子元素的em是1em=100px;
</header>

三、行動裝置頁面開發技巧:

先調查使用者的使用情況,總結出大部分使用者使用的都是什麼設備。

例如:我現在的用戶大多使用的是三種手機,我們先將每種手機的解析度都從網路上找出來。

將他們都羅列出來,然後去寫媒體查詢(因為不同手機解析度不同,所以用像素的話,會出現顯示的相同,舉個栗子~ 比如說小朋友吃飯,食堂給小朋友的標配是饅頭,可是有的小朋友飯量大,有的飯量小,所以會出現不夠吃或吃不了造成浪費。怎麼避免這種情況呢,所以食堂大媽想了一個主意體重在50斤~60斤的小盆友可以領取到一個饅頭,低於50斤的半個饅頭,體重大於60斤的,兩個饅頭,這三種分配方式。)

我的使用者群體大概是這三種設備

設備名稱解析度估算字體大小rem與px轉換
iphone5 320568 font-size:12px;1rem=12px
iphone6 375667 font-size:14px;1rem=14px
##6 Plus 414iphone* 736 font-size:16px;1rem=16px

先取出一個中間的設備來做基本樣式的書寫

最開始的書寫可以根據設計圖紙來進行px的書寫(也就是先選擇好饅頭的大小)
優先寫出一套模版,然後基於這套模版去寫別的設備的媒體查詢

在頁面中優先寫出媒體查詢的標籤

<meta name="viewport" content="width=device-width,      initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,    user-scalable=no">

# width - viewport裝置的寬度

height - viewport裝置的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許使用者縮放到的最小比例
maximum-scale - 允許使用者縮放到的最大比例
user-scalable - 用戶是否可以手動縮放

上面分配好了,按照這種方式寫媒體查詢

html,body{ height: 100%; margin : 0; padding: 0; font-size: 14px;}//注意初始樣式必須寫在最頂部! ! ! !如果寫在媒體查詢底部的話就會覆蓋上方的媒體查詢(因為是層疊樣式表嘛~)

@media screen and (max-width:320px ) {
    html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
    html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
    html{font-size: 16px;}
}

因為上面寫好了一套初始模版,因為初始模版都是px的,在文章的開端我們就強調了為什麼不能用px了,所以我們要將頁面中的px轉換成對應的rem值

例:

header{
    width:140px;//转化为10rem,因为我们是基于最中间的设备做的,中间设备的font-size:14px,所以140px=10rem。
}

所有用px的高寬全部改成rem這樣就完成了,三種設備的適配。

以上是深入理解CSS中的rem以及行動端的佈局方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn