Html5移動端頁面自適應佈局詳解(rem佈局)

時間 2019-11-30

標籤 html5 html 移動頁面自適應佈局詳解 rem 欄目 HTML5 简体版

原文原文鏈接

在移動設備上進行網頁的重構或開發，首先得搞明白的就是移動設備上的viewport,通讀網上的各類對於viewport的解釋以後css

大概viewport能夠理解爲三種html

1。layout viewport ,也就是這個瀏覽器默認的viewport前端

2。visual viewport , 瀏覽器可視區域viewportweb

3。 ideal viewport ,移動設備的理想viewportchrome

通俗點講，pc端css中的1px並不會等於移動端，原理很簡單，舉個例子說瀏覽器

經過chrome瀏覽器能夠知道，一個Iphone 6 plus是414*736，而pc端的頁面動輒幾千px以上，因此css中的1px並不等於設備的1pxide

這也就意味着設備的1px等於多個csspx，也就是1px:Npx的關係佈局

具體的解釋我就很少說了，想要深刻理解，能夠跳轉移動前端開發之viewport的深刻理解post

下面講怎麼設置viewport學習

1 <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">

爲了達到理想移動設備viewport，能夠用meta標籤對viewport進行控制

而meta標籤內能夠有不少的屬性，具體以下

width	設置layout viewport 的寬度，爲一個正整數，或字符串"width-device"
initial-scale	設置頁面的初始縮放值，爲一個數字，能夠帶小數
minimum-scale	容許用戶的最小縮放值，爲一個數字，能夠帶小數
maximum-scale	容許用戶的最大縮放值，爲一個數字，能夠帶小數
height	設置layout viewport 的高度，這個屬性對咱們並不重要，不多使用
user-scalable	是否容許用戶進行縮放，值爲"no"或"yes", no 表明不容許，yes表明容許

那麼要獲得ideal viewport就必須把默認的layout viewport的寬度設爲移動設備的屏幕寬度。由於meta viewport中的width能控制layout viewport的寬度，因此咱們只須要把width設爲width-device這個特殊的值就好了

那麼經過各大網友的測試，寬度都是豎屏時ideal viewport的寬度

可是這句話並非全部瀏覽器都兼容的，那麼爲了使瀏覽器都有一個ideal viewport，content="initial-scale=1經過這句話使縮放比例爲1

ideal viewport的效果就能正常實現了，這裏我也是知其然而不知其因此然，具體的內容也能夠經過跳轉移動前端開發之viewport的深刻理解我就很少解釋了

下面上一個簡單的移動端佈局

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Document</title>
  7     <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">
  8     <script>
  9         //經過window.screen.width獲取屏幕的寬度
 10         var offWidth = window.screen.width / 30; //這裏用寬度/30表示1rem取得的px
 11         document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px'; //把rem的值複製給頂級標籤html的font-size
 12     </script>
 13     <style>
 14         /*偷個懶就直接全局初始化了*/
 15         
 16         * {
 17             padding: 0;
 18             margin: 0;
 19         }
 20         /* 佈局需求,上下都間隔*/
 21         div {
 22             margin: 0.833333333rem 0;
 23         }
 24         /* 去處a標籤的下劃線*/
 25         a {
 26             text-decoration: none;
 27         }
 28         
 29         .one {
 30             width: 30rem;
 31             /*100/720*30*/
 32             height: 4.166666667rem;
 33             /*圖片寬750,高100*/
 34             background: url("./img/head.png");
 35             background-size: contain;
 36         }
 37         
 38         .two {
 39             width: 30rem;
 40             /*400/720*30*/
 41             height: 16.6666667rem;
 42             /*圖片寬750,高400*/
 43             background: url("./img/top1.jpg");
 44             background-size: contain;
 45         }
 46         
 47         .three {
 48             width: 30rem;
 49             height: 5.875rem;
 50             /*圖片寬750,高141*/
 51             background: url("./img/top2.jpg");
 52             background-size: contain;
 53         }
 54         
 55         .four {
 56             width: 28.33333333rem;
 57             height: 13.16666667rem;
 58             /*圖片寬750,高316*/
 59             background: url("./img/top3.jpg") no-repeat;
 60             background-size: contain;
 61             margin-left: 0.833333333rem;
 62             position: relative;
 63         }
 64         
 65         span {
 66             position: absolute;
 67             display: block;
 68             width: 8.33333333rem;
 69             height: 2rem;
 70             line-height: 2rem;
 71             text-align: center;
 72             background: #fff;
 73             right: 0.833333333rem;
 74             bottom: 0.833333333rem;
 75             font-size: 0.95833333rem;
 76             color: red;
 77             cursor: pointer;
 78         }
 79         
 80         .five {
 81             width: 28.33333333rem;
 82             height: 13.16666667rem;
 83             /*圖片寬750,高316*/
 84             background: url("./img/top4.jpg") no-repeat;
 85             background-size: contain;
 86             margin-left: 0.833333333rem;
 87         }
 88     </style>
 89 
 90 </head>
 91 
 92 <body>
 93     <div class="one"></div>
 94     <div class="two"></div>
 95     <div class="three"></div>
 96     <div class="four">
 97         <a href=""><span>25元起</span></a>
 98     </div>
 99     <div class="five"></div>
100 </body>
101 
102 </html>

能夠看到，我每一個div裏面都使用的rem這個代替了px單位

沒錯就是用這兩句句話來進行改變的

var offWidth = window.screen.width / 30;

document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px';

就拿第一個div裏的height和width來舉例

width: 30rem;
100/720*30
height: 4.166666667rem;
圖片寬750,高100

因爲給的圖裏面第一塊是720px寬，100px的高，web端我能夠直接這麼寫，可是手機上確定不行啊，由於屏幕只有這麼寬

縮放比例必須是正好才行

經過window.screen.width，就已經獲取了屏幕寬，那麼/30就是寬度分紅30份，既然我寬度是滿屏，那麼width=30rem

寬度有了，720是30rem，那麼100是多少rem很好求了，徹底是數學問題，100/720*30獲得4.1666666667無限循環小數

本着小數越多就越精確的原則，咱們取到小數點後面的9位，固然你喜歡20位也能夠，不過好像瀏覽器並不支持

其餘的div裏的width和height也是以此類推，就再也不重複說明了