移動端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;