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

資訊專欄INFORMATION COLUMN

rem

inapt / 3261人閱讀

摘要：使用原理，，根據(jù)屏幕寬度等比壓縮網(wǎng)頁一前言我們在編寫網(wǎng)頁時(shí)，往往需要兼顧網(wǎng)頁在不同屏寬情況下的顯示而有時(shí)為了省事，沒時(shí)間寫新的頁面，也為了兼容考慮，這就需要使用等比壓縮了等比壓縮的核心是二正文一的使用是中新增的一個(gè)單位屬性相對長度單位，相對

使用rem原理，62.5%，根據(jù)屏幕寬度等比壓縮網(wǎng)頁

一、前言

我們在編寫網(wǎng)頁時(shí)，往往需要兼顧網(wǎng)頁在不同屏寬情況下的顯示
而有時(shí)為了省事，沒時(shí)間寫新的頁面，也為了兼容考慮，這就需要使用等比壓縮了
等比壓縮的核心是rem

二、正文
（一）rem的使用

rem是css3中新增的一個(gè)單位屬性
相對長度單位，相對于根元素（即html元素）font-size計(jì)算值的倍數(shù)
rem在桌面瀏覽器上的初始值是16px（即1rem=16px）


    
    
        
 此處的1rem即設(shè)備的默認(rèn)字體大小，桌面瀏覽器默認(rèn)字體大小是16px
    



    
        
            
此處的1rem是12px

當(dāng)然還可以在css上進(jìn)行賦值，或者使用js進(jìn)行動(dòng)態(tài)的初始賦值

/*使用css進(jìn)行rem的賦值*/
html{
    font-size:14px;  // 此處的初始賦值表示1rem=14px
}

（二）rem的62.5%和10px的區(qū)別

在桌面瀏覽器上font-size的默認(rèn)值是16px；
可知font-size：62.5%；即表示10px；（16*62.5%=10px）
那么font-size：62.5%；和font-size：10px的區(qū)別是什么呢？

比較好的解釋：
    桌面瀏覽器默認(rèn)字體是16px，這種情況下設(shè)置成具體像素大小或?qū)?yīng)的百分比看起來效果是一樣的；
     但是其他類型的設(shè)備的默認(rèn)字體大小不一定是16px
     特別是高分辨率的設(shè)備，16px大小的字體在他們上邊看起來會非常小，所以不能在body上設(shè)置具體像素值，設(shè)置成百分比，可以按照設(shè)備的基準(zhǔn)字體大小給編寫的網(wǎng)頁設(shè)置好最合適的用戶瀏覽的字體大小
     最重要的不是屏幕實(shí)際的像素大小，屏幕上文字的可讀性才是最重要的

（三）正確的rem使用方法
如上文所述，使用font-size：62.5%更好

html{
    font-size:62.5%;
}

然而坑無處不在
新的問題：我們開發(fā)常用的chrome瀏覽器，支持的最小字體大小是12px

/*rem在不同瀏覽器下的結(jié)果*/
html{
    font-size:62.5%;
}
header{
    height:8rem  //在其他瀏覽器表示80px，在chorme上表示96px
}

解決辦法：

    font-size:625%
    1rem = 100px 
    以此為單位進(jìn)行換算，可以避免出現(xiàn)以上的問題

(四) em和rem的區(qū)別

rem是相對于根節(jié)點(diǎn)的font-size計(jì)算
em是相對于父節(jié)點(diǎn)的font-size計(jì)算

    
        
    
    
　　　　
        
此處的1rem = 100px


　　　　

(五) 的含義

那么，他有什么作用呢？
viewport用于移動(dòng)端自適應(yīng)
但如果是瀏覽器流動(dòng)布局的網(wǎng)頁 那情況會非常糟糕，設(shè)想一個(gè)寬 度為30%的側(cè)邊欄對于320px手機(jī)屏幕而言也就96px，只能容納8個(gè)12px的漢字，可閱讀性非常差。
為了讓手機(jī)也能獲得良好的網(wǎng)頁瀏覽體驗(yàn)，Apple找到了一個(gè)辦法：在移動(dòng)版(iOS)的Safari中定義了viewport meta標(biāo)簽①，它的作用就是創(chuàng)建一個(gè)虛擬的窗口(viewport)，而且這個(gè)虛擬窗口的分辨率接近于桌面顯示器

width 設(shè)置layout viewport 的寬度，為一個(gè)正整數(shù)，或字符串"width-device"
initial-scale 設(shè)置頁面的初始縮放值，為一個(gè)數(shù)字，可以帶小數(shù)
minimum-scale 允許用戶的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù)
maximum-scale 允許用戶的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù)
height 設(shè)置layout viewport 的高度，這個(gè)屬性并不重要，很少使用
user-scalable 是否允許用戶進(jìn)行縮放，值為"no"或"yes", no 代表不允許，yes代表允許

(六) 根據(jù)屏幕寬度等比壓縮網(wǎng)頁

//根據(jù)屏幕計(jì)算設(shè)計(jì)rem的標(biāo)準(zhǔn)中
 var documentWidth = document.documentElement.offsetWidth;

 if(documentWidth > 1268 ){
    document.documentElement.style.fontSize = documentWidth/166 + "px";
 }

使用上邊代碼，可以根據(jù)屏幕寬度等比壓縮網(wǎng)頁
但有兩個(gè)前提：

1、css代碼涉及大小的，統(tǒng)一使用rem進(jìn)行設(shè)置
2、html頭部不能使用：
同理：當(dāng)不需要等比壓縮網(wǎng)頁時(shí)，記得把這行代碼加上去，否則等比壓縮一直存在
原理：是根據(jù)屏寬動(dòng)態(tài)的設(shè)置根節(jié)點(diǎn)font-size，以此進(jìn)行rem的初始設(shè)置，實(shí)現(xiàn)對不同屏幕寬度的適配。

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

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

相關(guān)文章

  • Stylus插件開發(fā)教程

    摘要：你還需安裝一個(gè)依賴，告訴使用者，你這個(gè)是基于哪個(gè)版本開發(fā)的，當(dāng)然你可以不安裝這個(gè)依賴，那只能自己用了。開發(fā)調(diào)試在根目錄中運(yùn)行在本機(jī)全局為做一個(gè)軟鏈接，如果你移動(dòng)了目錄你得重新做軟鏈接。因?yàn)槟阍谇懊嫣砑恿宋募聦?shí)上導(dǎo)入的文件是。 由于Stylus的強(qiáng)大，它支持SCSS LESS 靈活的書寫方式，然后它不用像SCSS安裝Ruby，不是特別出名，流行的工具沒有使用它，只是在小的圈子里面挺火滴...

    cyqian 評論0 收藏0

  • 【基礎(chǔ)】EM 還是 REM？這是一個(gè)問題！

    摘要：但問題是究竟該用還是呢關(guān)于這個(gè)問題一直存在比較大的爭議。上述現(xiàn)象的出現(xiàn)，是因?yàn)槭窍鄬τ诋?dāng)前元素字體的大小。什么是表示，它是相對于根元素的長度單位。還是在項(xiàng)目開發(fā)中究竟是選用還是一直以來爭議不斷。這就是前述規(guī)則中的第一條規(guī)則。 簡言 應(yīng)用象EM 和 REM這種相對長度單位進(jìn)行頁面排版是WEB開發(fā)中的最佳實(shí)踐。在頁面排版中較好應(yīng)用EM 和 REM，根據(jù)設(shè)備尺寸縮放顯示元素的大小。這就使得組...

    lk20150415 評論0 收藏0

  • 了解并使用CSS中的rem單位

    摘要：寫了一篇文章，里面記錄了他在實(shí)際使用單位過程中的一些感受。他的解決方式充分利用了到目前為止我們遇到的三種單位。根元素的長度單位依舊采用，模塊用單位，模塊內(nèi)的元素使用單位。隨后在中單位的強(qiáng)大之處提出了他的觀點(diǎn)。 什么是 rem 可能在你使用收音機(jī)或者用其他音樂播放器之前，就已經(jīng)聽過R.E.M.這個(gè)詞了。在這個(gè)樂隊(duì)眼中，這個(gè)詞是淺睡眠時(shí)眼球的快速轉(zhuǎn)動(dòng)的縮寫，而在 css 中，rem 代表著...

    BWrong 評論0 收藏0

  • REM如何無視手機(jī)系統(tǒng)字號調(diào)整

    摘要：經(jīng)檢查發(fā)現(xiàn)，中的值是正常值，但是出現(xiàn)了一個(gè)匪夷所思的情況頁面上的以為例，在移動(dòng)端內(nèi)嵌中設(shè)置元素最終出來的高度竟然是。。。整個(gè)人就蒙圈了，然后突然靈光一閃，發(fā)現(xiàn)是系統(tǒng)的字號調(diào)大了。。。系統(tǒng)如何處理的這個(gè)展示還沒有搞清楚。。。 此問題屬于REM的優(yōu)化 解決如下問題 在移動(dòng)端rem布局中 ， 多數(shù)環(huán)境多數(shù)瀏覽器下rem的計(jì)算妥妥的沒有問題 ， 但是部分環(huán)境 ， 比如某些軟件內(nèi)嵌的webvie...

    王笑朝 評論0 收藏0

  • REM如何無視手機(jī)系統(tǒng)字號調(diào)整

    摘要：經(jīng)檢查發(fā)現(xiàn)，中的值是正常值，但是出現(xiàn)了一個(gè)匪夷所思的情況頁面上的以為例，在移動(dòng)端內(nèi)嵌中設(shè)置元素最終出來的高度竟然是。。。整個(gè)人就蒙圈了，然后突然靈光一閃，發(fā)現(xiàn)是系統(tǒng)的字號調(diào)大了。。。系統(tǒng)如何處理的這個(gè)展示還沒有搞清楚。。。 此問題屬于REM的優(yōu)化 解決如下問題 在移動(dòng)端rem布局中 ， 多數(shù)環(huán)境多數(shù)瀏覽器下rem的計(jì)算妥妥的沒有問題 ， 但是部分環(huán)境 ， 比如某些軟件內(nèi)嵌的webvie...

    codergarden 評論0 收藏0

發(fā)表評論

0條評論

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