溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

CSS中的rem和移動(dòng)端的布局方法

發(fā)布時(shí)間：2020-05-07 14:48:01 來(lái)源：億速云 閱讀：293 作者：Leah 欄目：web開(kāi)發(fā)

今天小編給大家分享的是CSS中的rem和移動(dòng)端的布局方法的詳細(xì)介紹，相信很多人都不太了解，為了讓大家更加了解，給大家總結(jié)了以下內(nèi)容，話(huà)不多說(shuō)，一起往下看吧。

一、rem是什么？

rem是css3中新增加的一個(gè)單位屬性(font size of the root element),根據(jù)頁(yè)面的根節(jié)點(diǎn)的字體大小進(jìn)行轉(zhuǎn)變的單位。root?。。。。。。。?！根節(jié)點(diǎn)，也就是html。

例：(下面例子中的根節(jié)點(diǎn)是html ，它的字體大小是100px，所以根節(jié)點(diǎn)下面的元素所設(shè)置的rem，都是1rem=100px。)
rem的初始值是16px，也就是說(shuō)在沒(méi)有設(shè)置根節(jié)點(diǎn)的font-size的時(shí)候，1rem=16px

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

二、em是什么

em也是一個(gè)相對(duì)單位，em單位是根據(jù)父元素的字體大小來(lái)進(jìn)行轉(zhuǎn)變的單位。
1、em的值并不是固定的；
2、em會(huì)繼承父級(jí)元素的字體大小。

父節(jié)點(diǎn)
例：

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

三、移動(dòng)端頁(yè)面開(kāi)發(fā)技巧：

先調(diào)查用戶(hù)的使用情況，總結(jié)出大部分用戶(hù)使用的都是什么設(shè)備。
比如：我現(xiàn)在的用戶(hù)大多使用的是三種手機(jī)，我們先將每種手機(jī)的分辨率都從網(wǎng)上找出來(lái)。

將他們都羅列出來(lái)，然后去寫(xiě)媒體查詢(xún)（因?yàn)椴煌謾C(jī)分辨率不同，所以用像素的話(huà)，會(huì)出現(xiàn)顯示的相同，舉個(gè)栗子~ 比如說(shuō)小朋友吃飯，食堂給小朋友的標(biāo)配是一個(gè)饅頭，可是有的小朋友飯量大，有的飯量小，所以會(huì)出現(xiàn)不夠吃或者吃不了造成浪費(fèi)。怎么避免這種情況呢，所以食堂大媽想了一個(gè)主意體重在50斤~60斤的小盆友可以領(lǐng)取到一個(gè)饅頭，低于50斤的半個(gè)饅頭，體重大于60斤的，兩個(gè)饅頭，這三種分配方式。）

我的用戶(hù)群體大概是這三種設(shè)備
設(shè)備名稱(chēng) 分辨率 估算字體大小 rem與px轉(zhuǎn)換
iphone5 320568 font-size：12px； 1rem=12px
iphone6 375667 font-size：14px； 1rem=14px
iphone6 Plus 414*736 font-size：16px； 1rem=16px

先取出一個(gè)中間的設(shè)備來(lái)做基本樣式的書(shū)寫(xiě)
最開(kāi)始的書(shū)寫(xiě)可以根據(jù)設(shè)計(jì)圖紙來(lái)進(jìn)行px的書(shū)寫(xiě)（也就是先選擇好饅頭的大?。?br/>優(yōu)先寫(xiě)出一套模版，然后基于這套模版去寫(xiě)別的設(shè)備的媒體查詢(xún)

在頁(yè)面中優(yōu)先寫(xiě)出媒體查詢(xún)的標(biāo)簽

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

width - viewport設(shè)備的寬度
height - viewport設(shè)備的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許用戶(hù)縮放到的最小比例
maximum-scale - 允許用戶(hù)縮放到的最大比例
user-scalable - 用戶(hù)是否可以手動(dòng)縮放

上面分配好了，按照這種方式寫(xiě)媒體查詢(xún)

html,body{ height: 100%; margin: 0; padding: 0; font-size: 14px;}//注意初始樣式必須寫(xiě)在最頂部?。。?！如果寫(xiě)在媒體查詢(xún)底部的話(huà)就會(huì)覆蓋上方的媒體查詢(xún)（因?yàn)槭菍盈B樣式表嘛~）

@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;}
}

因?yàn)樯厦鎸?xiě)好了一套初始模版，因?yàn)槌跏寄０娑际莗x的，在文章的開(kāi)端我們就強(qiáng)調(diào)了為什么不能用px了，所以我們要將頁(yè)面中的px轉(zhuǎn)換成相應(yīng)的rem值

例：

header{
    width:140px;//轉(zhuǎn)化為10rem，因?yàn)槲覀兪腔谧钪虚g的設(shè)備做的，中間設(shè)備的font-size：14px，所以140px=10rem。
}

所有用px的高寬全部改成rem這樣就完成了，對(duì)三種設(shè)備的適配。

以上就是CSS中的rem和移動(dòng)端的布局方法的簡(jiǎn)略介紹，詳細(xì)使用情況還需要大家自己使用過(guò)才領(lǐng)會(huì)。如果想了解更多，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手