欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用CSS3的rem屬性制作響應(yīng)式頁面布局的要點(diǎn)解析

520ued   發(fā)布時(shí)間：2016-05-24 12:07:21   作者：owenhong   我要評論
CSS3的rem屬性除了設(shè)置字體大小,還經(jīng)常被用來做頁面布局中的很多尺寸控制,這里我們就來看一下使用CSS3的rem屬性制作響應(yīng)式頁面布局的要點(diǎn)解析

其實(shí)rem不只是能應(yīng)用到字體上面，還可以應(yīng)用到長度和寬度上面，接下來看下我做的一個(gè)項(xiàng)目的首頁吧。
Demo
    由于這個(gè)項(xiàng)目我設(shè)置了最大的寬度限制是640px,最小限制是320px,大家可以改變?yōu)g覽器的分辨率或者通過手機(jī)訪問看看效果?；旧显诓煌直媛氏露际遣畈欢嗟恼故拘Ч?，而且在手機(jī)移動(dòng)終端下都是100%的撐開。這種響應(yīng)式的效果，我想應(yīng)該是最符合現(xiàn)在移動(dòng)終端多樣化的需求的，如果只是做幾個(gè)特別適應(yīng)的尺寸，例如320、480、340、600這種特定的尺寸，那真是要累死前端開發(fā)的同學(xué)了。但是如果用rem來實(shí)現(xiàn)就可以不用考慮上訴的問題也可以達(dá)到自適應(yīng)了。
    這個(gè)效果對設(shè)計(jì)師的要求也是非常嚴(yán)格的，例如你需要指定一個(gè)規(guī)范的寬度進(jìn)行設(shè)計(jì)，我們的設(shè)計(jì)師是按照640的寬度去設(shè)計(jì)的，實(shí)際設(shè)計(jì)圖的寬度是640*2這樣做的目的是為了在移動(dòng)端能高清顯示。小圖標(biāo)是采用CSS3的圖標(biāo)字體，不得不說這是個(gè)非常好的東西。

設(shè)置對應(yīng)的響應(yīng)式的html rem比例
    我們平常在使用長度單位都會(huì)使用px，但是在做上面的響應(yīng)式的時(shí)候，需要用rem或者百分比的單位，大家可以看我的Demo代碼。在上篇文章介紹了rem的字體設(shè)置計(jì)算方法：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. html{   
  2.     font-size:62.5%; /* 10÷16=62.5% */  
  3. }   
  4. body{   
  5.     font-size:12px;   
  6.     font-size:1.2rem ; /* 12÷10=1.2 */  
  7. }   
  8. p{   
  9.     font-size:14px;   
  10.     font-size:1.4rem;   
  11. }  

    通過設(shè)置html的font-size值來控制全局的rem輸出，這段代碼其實(shí)是這個(gè)rem的精髓所在，我在我的頁面中設(shè)置了如下的代碼來控制不同設(shè)備下的字體大小顯示使其達(dá)到自適應(yīng)：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. html {   
  2.     font-size: 62.5%;   
  3. }   
  4. @media only screen and (min-width: 481px){   
  5.     html {   
  6.         font-size: 94%!important;   
  7.     }   
  8. }   
  9. @media only screen and (min-width: 561px){   
  10.     html {   
  11.         font-size: 109%!important;   
  12.     }   
  13. }   
  14. @media only screen and (min-width: 641px){   
  15.     html {   
  16.         font-size: 125%!important;   
  17.     }   
  18. }  

    看上面的代碼，可能大家會(huì)覺得為什么要這樣設(shè)置呢，其實(shí)這個(gè)是根據(jù)許多測試推算出來的，上面代碼如果要轉(zhuǎn)換城px會(huì)變成這樣：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. html {   
  2.     font-size: 62.5%; /* 10÷16=62.5% */  
  3. }   
  4. @media only screen and (min-width: 481px){   
  5.     html {   
  6.         font-size: 94%!important; /* 15.04÷16=94% */  
  7.     }   
  8. }   
  9. @media only screen and (min-width: 561px){   
  10.     html {   
  11.         font-size: 109%!important; /* 17.44÷16=109% */  
  12.     }   
  13. }   
  14. @media only screen and (min-width: 641px){   
  15.     html {   
  16.         font-size: 125%!important; /* 20÷16=125% */  
  17.     }   
  18. }  

給margin padding 設(shè)置rem
    上面展示的是怎么通過計(jì)算獲取到不同分辨率下的html font-site百分比的值。實(shí)際開發(fā)如果設(shè)計(jì)師是按照640的寬度去設(shè)計(jì)的，我們就按照最大的640去切圖，切圖的時(shí)候如果我們要設(shè)置margin怎么banner，設(shè)計(jì)圖的值加入是10px的間距，我們通過640的比例去計(jì)算：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. margin-top:.5rem; /*10 ÷ 20 = 0.5*/  
  2. padding-top:1rem /* 20 ÷ 20 =1 */  

    上面分別是設(shè)計(jì)圖上的間距10px和20px計(jì)算成rem的方法，大家可以以此類推，如果你的設(shè)計(jì)圖是640設(shè)計(jì)的就可以用上面的方法，反正每次以最大的值來計(jì)算就可以了。

給height width 設(shè)置rem
    實(shí)際開發(fā)中大家最常設(shè)置的估計(jì)就是height width值了，為了做到各個(gè)設(shè)備下長度自己相應(yīng)，許多開發(fā)人員會(huì)用百分比來做，這個(gè)是沒有問題，但是其實(shí)很多場景下用rem比百分比更加靈活，在我實(shí)際開發(fā)中，一般我只在大塊的div布局里面用百分比，元素的設(shè)置一般都用rem來。例如：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. height:100px; /* 100 ÷ 20 = 5rem;*/  
  2. width:50px; /* 50 ÷ 20 = 2.5rem;*/  

給border 設(shè)置rem
其實(shí)就連border我們也可以用rem來做，但是貌似現(xiàn)在的安卓手機(jī)對border用rem單位有一小部分不支持，在我開發(fā)測試發(fā)現(xiàn)了，高版本的安卓瀏覽器支持，但是低版本的有許多都不支持，具體要不要使用就看你們自己的情況。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. border:.2rem solid #cccccc;  

需要注意的是：
網(wǎng)頁要多終端匹配，傳統(tǒng)字體單位px滿足不了，考慮使用rem單位

rem 是相對于根節(jié)點(diǎn)的！

為此，如下代碼，先讓根節(jié)點(diǎn)單位為10px，之后就方便使用rem了

CSS Code復(fù)制內(nèi)容到剪貼板
  1. html { font-size: 62.5%; }    
  2. body { font-size: 1.4rem; } /* =14px */  
  3. h1   { font-size: 2.4rem; } /* =24px */  

 非常好的是，rem ie9支持

如要兼容ie9以下瀏覽器，可

CSS Code復(fù)制內(nèi)容到剪貼板
  1. html { font-size: 62.5%; }    
  2. body { font-size: 14px; font-size: 1.4rem; } /* =14px */  
  3. h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */  

總結(jié)
rem的使用其實(shí)我可能是只是總結(jié)了大家比較常用的一些屬性，其實(shí)他的范圍肯定不止是這么多，實(shí)際的項(xiàng)目開發(fā)中我相信大家在使用他的過程會(huì)發(fā)現(xiàn)許多驚喜的，非常希望大家留言討論這一章的內(nèi)容。有什么問題我會(huì)第一時(shí)間反饋。

相關(guān)文章

最新評論