一.怎么讓H5頁面適應手機
a.利用meta標簽
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
解釋：Viewport指用戶網頁的可視區域，content中的“width”指的是虛擬窗口寬度，上面代碼意為虛擬窗口/頁面寬度初始比例為1，最小比例為1，最大比例為1，用戶不可擴展，頁面不可縮放。
<meta name="apple-mobile-web-app-capable" content="yes">
解釋：添加到主屏幕后，全屏顯示。
<meta name="apple-mobile-web-app-status-bar-style" content="black">
解釋：作用就是刪除默認的蘋果工具欄和菜單欄。content有兩個值”yes”和”no”,當我們需要顯示工具欄和菜單欄時，這個行meta就不用加了，默認就是顯示。
b.百分比法
CSS中的百分比中指的是相對於父元素的寬度。子元素盒子width最好使用百分比來寫，能最大可能的適應各種屏幕，但這只適合布局簡單的頁面，復雜的頁面實現很困難。
c.使用css3的單位rem
rem是個單位，單位大小由它第一代老祖宗的font-size的大小決定。在頁面載入開始時首先判斷window的寬度（是window的寬度($(window).width())，不是屏幕分辯率的寬度（screen.width），兩者差別請自行查閱），然后計算得出換算比例，等下下方會貼出相應的計算代碼。
二.自適應動態設置html
例如以屏幕320像素為基准:
html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}
方法1：使用媒體查詢換算出各分辨率的比例
@media screen and (min-width:320px) and (max-width:359px) and (orientation:portrait) { html { font-size: 625%; } } @media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) { html { font-size: 703%; } } @media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) { html { font-size: 732.4%; } } @media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) { html { font-size: 750%; } } @media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) { html { font-size: 781.25%; } } @media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){ html { font-size: 808.6%; } } @media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){ html { font-size: 843.75%; } }
然后，設計稿px換算直接/100即可得到rem值。然而，這種方法初略計算大致的范圍，只能解決一部分的情況，並不能完全適配，不建議使用；
方法二：根據屏幕分辨率來換算比例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>rem字體大小自適應</title> <link rel="stylesheet" href="css/reset.css" type="text/css"><!--此處是我全局css代碼，清除默認樣式，無影響--> <style> .ending_box{ position: absolute; top:0; left: 0; width: 100%; height: 100%; } .ending_con{ position: absolute; top: 50%; left: 50%; width: 5rem; height: 6rem; margin-left: -2.5rem; margin-top: -3rem; } .ending_con .ending_img{ margin: 0 auto; } .ending_con .ending_img img{ width: 100%; } .ending_con .ending_txt{ text-align: center; line-height: 0.6rem; font-size: 0.32rem; color:#333; margin-top: 0.5rem; letter-spacing: 2px; } </style> <script> (function(win, designW) { var doc = win.document; var docEle = doc.documentElement; designW = designW || 640; //設計稿寬度px,默認640px設計稿 var ratio = designW / 100;//640px=> 1rem = 100px, 超出640px font-size：100px; var or = "orientationchange" in win ? "orientationchange" : "resize"; //創建viewport _createViewport(); if(doc.addEventListener){ win.addEventListener(or, _refreshRem, false); doc.addEventListener("DOMContentLoaded", _refreshRem, false); } /** * 創建viewport */ function _createViewport(){ var metaEl = doc.createElement('meta'); metaEl.setAttribute('name', 'viewport'); metaEl.setAttribute('content', 'initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no'); if (docEle.firstElementChild) { docEle.firstElementChild.appendChild(metaEl); } } /** * 動態更新rem */ function _refreshRem() { var clientW = docEle.clientWidth || 320; //設置最大和最小寬度取值 if(clientW > designW){ clientW = designW } else if(clientW<320){ clientW=320; } docEle.style.fontSize = clientW / ratio + "px"; }; })(window, 750);//750為設計稿寬度px值,根據實際設計稿大小對應設置 </script> </head> <body> <div class="ending_box" q-ctrl="endingCtrl"> <div class="ending_con"> <p class="ending_img"> <img src="https://www.cnblogs.com/images/cnblogs_com/hejun26/1310858/o_longmao.jpg"/> </p> <p class="ending_txt">這里是測試的圖片和文字,請切換屏幕大小查看效果！</p> </div> </div> </body> </html>
然后按照750的設計稿，設計稿px換算直接/100即可得到rem值。
注：后期發現一個編寫錯誤，設計稿px/100得出我們的rem的值。
方法三：百分比+彈性盒布局
不管是用哪種布局我都習慣性用彈性盒布局，display:flex,我覺得相當的美好，不用一點點的去量寬度，而且可以替換浮動，也不用清除浮動，不管是PC還是移動都是不錯的，有時候懶得用rem我就是用百分比+彈性盒，但是，各位請注意，兼容性問題考慮一下，彈性盒的集中兼容寫法注意一下，手機端感覺是各種通用的，瀏覽器兼容一般，主流OK的，但是IE10以下估計完蛋。
a.有6個屬性作用在父盒子box上，對子盒子起作用
1. flex-direction 決定主軸的對齊方向，分別有四個屬性：
row（默認值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
2. flex-wrap ：定義子元素超過一行，如何換行，分別有三個屬性：
nowrap（默認值）：默認不換行。
wrap：換行，第二行在第一行下面，從左到右
wrap-reverse：換行，第二行在第一行上面，從左到右；
3. flex-flow:是flex-direction 和flex-wrap的簡寫形式，默認是 row nowrap：
4. justify-content: 子元素在主軸對齊方式：
flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
5. align-items：交叉軸如何對齊，如果flex-direction：row和row-reverse 那么交叉軸就是y軸，如果是column和column-reverse那么交叉軸是x軸：
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
6. align-content:屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用：
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸。
b.有一個常用的屬性作用在子盒子上
1.flex-grow 放大比例 默認是0 當有放大空間的時候，值越大，放大的比例越大：
flex-grow: 1;