成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

MoAir / 767人閱讀

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

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

1 如何聲明根元素字號大小

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

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

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

html {
    font-size: 1em;
}

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

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

2 使用原生 js 查看根元素字號 
/* currentStyle 針對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è)計指南 3.1 停止使用像素去思考

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

3.2 設(shè)置一個合理的字號默認值

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

3.3 并非所有地方都使用 rem

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

3.4 使用媒體選擇器

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

3.5 瀏覽器默認字體大小參考

一般瀏覽器默認值是 16px。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117006.html

相關(guān)文章

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

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

    blastz 評論0 收藏0

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

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

    shiina 評論0 收藏0

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

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

    BLUE 評論0 收藏0

  • 移動端網(wǎng)頁怎么做？

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

    luoyibu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<