亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

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

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輸出，這段代碼其實是這個rem的精髓所在，我在我的頁面中設(shè)置了如下的代碼來控制不同設(shè)備下的字體大小顯示使其達到自適應(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. }  

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

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

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

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

給height width 設(shè)置rem
    實際開發(fā)中大家最常設(shè)置的估計就是height width值了，為了做到各個設(shè)備下長度自己相應(yīng)，許多開發(fā)人員會用百分比來做，這個是沒有問題，但是其實很多場景下用rem比百分比更加靈活，在我實際開發(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
其實就連border我們也可以用rem來做，但是貌似現(xiàn)在的安卓手機對border用rem單位有一小部分不支持，在我開發(fā)測試發(fā)現(xiàn)了，高版本的安卓瀏覽器支持，但是低版本的有許多都不支持，具體要不要使用就看你們自己的情況。

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

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

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

為此，如下代碼，先讓根節(jié)點單位為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的使用其實我可能是只是總結(jié)了大家比較常用的一些屬性，其實他的范圍肯定不止是這么多，實際的項目開發(fā)中我相信大家在使用他的過程會發(fā)現(xiàn)許多驚喜的，非常希望大家留言討論這一章的內(nèi)容。有什么問題我會第一時間反饋。

相關(guān)文章

最新評論