移動端H5適配方法（盒子+圖片+文字）
一.怎麼讓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換算直接/50即可得到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;