国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用 rem 設(shè)計(jì)網(wǎng)頁(yè)

MoAir / 757人閱讀

摘要：使用偽類選擇元素是頂層節(jié)點(diǎn)，就是我們需要設(shè)置的根元素。使用媒體選擇器使用媒體選擇器適配不同平臺(tái)，可讓你的網(wǎng)頁(yè)看起來(lái)是響應(yīng)式的。

rem 是根 em (root em)的縮寫(xiě)。rem 是和根元素關(guān)聯(lián)的，不依賴當(dāng)前元素。例如，不管你在文檔什么地方使用這個(gè)單位，1.2rem 的計(jì)算值都是相等的，等于 1.2倍的根元素字號(hào)的大小。

1 如何聲明根元素字號(hào)大小

對(duì)于設(shè)置根元素字號(hào)大小，這里提供兩種方式，選擇任意一種即可。

1.1 使用偽類 
:root {
    font-size: 1em;
}
1.2 選擇 html 元素

html 是頂層節(jié)點(diǎn)，html 就是我們需要設(shè)置的根元素。如下所示，使用標(biāo)簽選擇器：

html {
    font-size: 1em;
}

或者是如果 html 元素有 id 或者 class 等屬性，使用其他的選擇器也是等同的。

總而言之，我們需要設(shè)置的是 html 元素的字體大小，選擇的方式不限定。

2 使用原生 js 查看根元素字號(hào) 
/* currentStyle 針對(duì)IE瀏覽器 */
function getStyle (obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[sttr];
    } else {
        return getComputedStyle(obj,false)[attr];
    }
}

var rem = getStyle(document.getElementsByTagName("html")[0], "font-size");
console.log("rem:", rem)
3 設(shè)計(jì)指南 3.1 停止使用像素去思考

我們很容易陷入這樣一種思維方式，先把 rem 換算為 px 單位再去思考，其實(shí)大可不必，直接使用 rem 思考，不用轉(zhuǎn)化為其他單位。讓它成為一種習(xí)慣。

3.2 設(shè)置一個(gè)合理的字號(hào)默認(rèn)值

直接設(shè)置 rem 為一個(gè)合理的字號(hào)默認(rèn)值，可以省去很多重復(fù)的字體樣式代碼，而不是為了方便換算去設(shè)置 rem。

3.3 并非所有地方都使用 rem

rem 只是你工具箱中的一個(gè)，并非所有地方都使用 rem。當(dāng)你不確定的時(shí)候，對(duì) font-size 使用 rem，對(duì) border 使用 px，以及對(duì)其他大多數(shù)屬性使用 em。

3.4 使用媒體選擇器

使用媒體選擇器適配不同平臺(tái)，可讓你的網(wǎng)頁(yè)看起來(lái)是響應(yīng)式的。

3.5 瀏覽器默認(rèn)字體大小參考

一般瀏覽器默認(rèn)值是 16px。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/117006.html

相關(guān)文章

  • Web網(wǎng)頁(yè)布局的主要方式

    摘要：改變屏幕分辨率可以切換不同的靜態(tài)局部頁(yè)面元素位置發(fā)生改變，但在每個(gè)靜態(tài)布局中，頁(yè)面元素不隨窗口大小的調(diào)整發(fā)生變化。即創(chuàng)建多個(gè)流體式布局，分別對(duì)應(yīng)一個(gè)屏幕分辨率范圍。 一、靜態(tài)布局（static layout） 　　即傳統(tǒng)Web設(shè)計(jì)，網(wǎng)頁(yè)上的所有元素的尺寸一律使用px作為單位。 1、布局特點(diǎn) 　　不管瀏覽器尺寸具體是多少，網(wǎng)頁(yè)布局始終按照最初寫(xiě)代碼時(shí)的布局來(lái)顯示。常規(guī)的pc的網(wǎng)站都是靜態(tài)...

    blastz 評(píng)論0 收藏0

  • Web網(wǎng)頁(yè)布局的主要方式

    摘要：改變屏幕分辨率可以切換不同的靜態(tài)局部頁(yè)面元素位置發(fā)生改變，但在每個(gè)靜態(tài)布局中，頁(yè)面元素不隨窗口大小的調(diào)整發(fā)生變化。即創(chuàng)建多個(gè)流體式布局，分別對(duì)應(yīng)一個(gè)屏幕分辨率范圍。 一、靜態(tài)布局（static layout） 　　即傳統(tǒng)Web設(shè)計(jì)，網(wǎng)頁(yè)上的所有元素的尺寸一律使用px作為單位。 1、布局特點(diǎn) 　　不管瀏覽器尺寸具體是多少，網(wǎng)頁(yè)布局始終按照最初寫(xiě)代碼時(shí)的布局來(lái)顯示。常規(guī)的pc的網(wǎng)站都是靜態(tài)...

    shiina 評(píng)論0 收藏0

  • Web移動(dòng)端頁(yè)面 --響應(yīng)式和動(dòng)態(tài)REM

    摘要：當(dāng)媒介最大寬度為且是橫屏?xí)r里面的樣式生效目前前端開(kāi)發(fā)項(xiàng)目類型可以分為兩種方式，和。這樣我們的響應(yīng)式網(wǎng)頁(yè)才完全生效了。移動(dòng)端特點(diǎn)移動(dòng)端特點(diǎn)沒(méi)有有沒(méi)有滾動(dòng)條沒(méi)有沒(méi)有因?yàn)橐苿?dòng)端是沒(méi)有事件的所以當(dāng)我們?cè)谛枰嫒菀苿?dòng)端的頁(yè)面中應(yīng)該盡量少用事件。鄙人最近才剛剛開(kāi)始學(xué)習(xí)一些關(guān)于移動(dòng)端的知識(shí)，還只是個(gè)小白，文中可能有許多理解錯(cuò)誤，望指出，請(qǐng)多多見(jiàn)諒。 響應(yīng)式 什么是響應(yīng)式頁(yè)面呢？ 顧名思義響應(yīng)式頁(yè)面就是能做...

    BLUE 評(píng)論0 收藏0

  • 移動(dòng)端網(wǎng)頁(yè)怎么做？

    摘要：移動(dòng)端網(wǎng)頁(yè)最大的特點(diǎn)是什么自適應(yīng)不同尺寸的屏幕高大上的叫法響應(yīng)式知道了自適應(yīng)網(wǎng)頁(yè)怎么做豈不是能很好解決問(wèn)題了那么自適應(yīng)網(wǎng)頁(yè)怎么做呢網(wǎng)上關(guān)于這方面的文章有很多，我簡(jiǎn)單的整理一下。 移動(dòng)端網(wǎng)頁(yè)最大的特點(diǎn)是什么？自適應(yīng)不同尺寸的屏幕！高大上的叫法:響應(yīng)式！知道了自適應(yīng)網(wǎng)頁(yè)怎么做豈不是能很好解決問(wèn)題了？那么自適應(yīng)網(wǎng)頁(yè)怎么做呢？網(wǎng)上關(guān)于這方面的文章有很多，我簡(jiǎn)單的整理一下。 一、 HTML設(shè)置 ...

    luoyibu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<