在移動端web開發上,難免會遇到各類移動設備的適配問題。在不斷踩坑的路上,總結出了兩套畢竟適合的適配移動端佈局的方案。html
描述:CSS3的媒體查詢方案很大層度上已經幫咱們完成了適配各類屏幕分辨率的問題。android
1 @charset "utf-8"; 2 html,body{ 3 width: 100%; 4 height: 100%; 5 } 6 @media screen and (min-width: 320px) { 7 html { 8 font-size: 50px; 9 } 10 } 11 @media screen and (min-width: 360px) { 12 html { 13 font-size: 56px; 14 } 15 } 16 17 @media screen and (min-width: 400px) { 18 html { 19 font-size: 63px; 20 } 21 } 22 23 @media screen and (min-width: 440px) { 24 html { 25 font-size: 69px; 26 } 27 } 28 29 @media screen and (min-width: 480px) { 30 html { 31 font-size: 75px; 32 } 33 } 34 @media screen and (min-width: 640px) { 35 html { 36 font-size: 100px; 37 } 38 } 39 body{ 40 font-family:'Microsoft YaHei',"Trebuchet MS",Verdana,Helvetica,Arial,sans-serif; 41 font-size:0.28rem; 42 color:#000000; 43 background-color: #ffffff; 44 } 45 *{ 46 padding:0; 47 margin:0; 48 box-sizing: border-box; 49 } 50 ul,ol,ul li,ol li{ 51 list-style-type: none; 52 } 53 /*設置取消input默認樣式*/ 54 input{ 55 -webkit-appearance: none; 56 -moz-appearance: none; 57 appearance: none; 58 } 59 /*設置input placeholder字體色號*/ 60 ::-webkit-input-placeholder { 61 color: #767676; 62 } 63 :-moz-placeholder { 64 color: #767676; 65 } 66 ::-moz-placeholder { 67 color: #767676; 68 } 69 :-ms-input-placeholder { 70 color: #767676; 71 } 72 input:focus::-webkit-input-placeholder{ 73 color:#767676; 74 } 75 /*設置清除浮動*/ 76 .clear:after{ 77 content: ''; 78 display: block; 79 width:100%; 80 height: 0; 81 visibility: hidden; 82 clear: both; 83 }
再結合針對移動網頁優化的viewport,便可完成大部分的移動端適配佈局。git
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
借鑑淘寶彈性佈局方案flexible.js,便可完成移動端的佈局。github
代碼出處:https://github.com/amfe/lib-flexible/blob/master/src/flexible.jsweb
備註:直接引用時須要加js代碼放置head頭部內。app
1 ;(function(win, lib) { 2 var doc = win.document; 3 var docEl = doc.documentElement; 4 var metaEl = doc.querySelector('meta[name="viewport"]'); 5 var flexibleEl = doc.querySelector('meta[name="flexible"]'); 6 var dpr = 0; 7 var scale = 0; 8 var tid; 9 var flexible = lib.flexible || (lib.flexible = {}); 10 11 if (metaEl) { 12 console.warn('將根據已有的meta標籤來設置縮放比例'); 13 var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); 14 if (match) { 15 scale = parseFloat(match[1]); 16 dpr = parseInt(1 / scale); 17 } 18 } else if (flexibleEl) { 19 var content = flexibleEl.getAttribute('content'); 20 if (content) { 21 var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); 22 var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/); 23 if (initialDpr) { 24 dpr = parseFloat(initialDpr[1]); 25 scale = parseFloat((1 / dpr).toFixed(2)); 26 } 27 if (maximumDpr) { 28 dpr = parseFloat(maximumDpr[1]); 29 scale = parseFloat((1 / dpr).toFixed(2)); 30 } 31 } 32 } 33 34 if (!dpr && !scale) { 35 var isAndroid = win.navigator.appVersion.match(/android/gi); 36 var isIPhone = win.navigator.appVersion.match(/iphone/gi); 37 var isIPad = win.navigator.appVersion.match(/ipad/gi); 38 var devicePixelRatio = win.devicePixelRatio; 39 if (isIPhone) { 40 // iOS下,對於2和3的屏,用2倍的方案,其他的用1倍方案 41 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { 42 dpr = 3; 43 } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ 44 dpr = 2; 45 } else { 46 dpr = 1; 47 } 48 } else { 49 // 其餘設備下,仍舊使用1倍的方案 50 dpr = 2; 51 } 52 scale = 1 / dpr; 53 } 54 55 docEl.setAttribute('data-dpr', dpr); 56 if (!metaEl) { 57 metaEl = doc.createElement('meta'); 58 metaEl.setAttribute('name', 'viewport'); 59 metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); 60 if (docEl.firstElementChild) { 61 docEl.firstElementChild.appendChild(metaEl); 62 } else { 63 var wrap = doc.createElement('div'); 64 wrap.appendChild(metaEl); 65 doc.write(wrap.innerHTML); 66 } 67 } 68 function IsPC() 69 { 70 var userAgentInfo = navigator.userAgent; 71 var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); 72 var flag = true; 73 for (var v = 0; v < Agents.length; v++) { 74 if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; } 75 } 76 return flag; 77 } 78 function refreshRem(){ 79 var width = docEl.getBoundingClientRect().width; 80 // if (width / dpr> 540) { 81 // width = 540 * dpr; 82 // } 83 if (IsPC() && width < 2047) { 84 width = 540; 85 } 86 87 var rem = width / 6.4; 88 docEl.style.fontSize = rem + 'px'; 89 flexible.rem = win.rem = rem; 90 } 91 92 win.addEventListener('resize', function() { 93 clearTimeout(tid); 94 tid = setTimeout(refreshRem, 300); 95 }, false); 96 win.addEventListener('pageshow', function(e) { 97 if (e.persisted) { 98 clearTimeout(tid); 99 tid = setTimeout(refreshRem, 300); 100 } 101 }, false); 102 103 if (doc.readyState === 'complete') { 104 doc.body.style.fontSize = 14 * dpr + 'px'; 105 } else { 106 doc.addEventListener('DOMContentLoaded', function(e) { 107 doc.body.style.fontSize = 14 * dpr + 'px'; 108 }, false); 109 } 110 111 112 refreshRem(); 113 114 flexible.dpr = win.dpr = dpr; 115 flexible.refreshRem = refreshRem; 116 flexible.rem2px = function(d) { 117 var val = parseFloat(d) * this.rem; 118 if (typeof d === 'string' && d.match(/rem$/)) { 119 val += 'px'; 120 } 121 return val; 122 } 123 flexible.px2rem = function(d) { 124 var val = parseFloat(d) / this.rem; 125 if (typeof d === 'string' && d.match(/px$/)) { 126 val += 'rem'; 127 } 128 return val; 129 } 130 })(window, window['lib'] || (window['lib'] = {}));
加載完畢後,頁面根節點html會有個data-dpr屬性(dpr:設備像素和CSS像素的比值)。經過iphone
[data-dpr=‘x’]屬性設置CSS樣式就能夠很好的解決了在高清屏幕下圖片存在失真的問題。移動端web
經過這兩種方案,就能夠很好的解決了移動端適配的問題。固然推薦引入flexible.js。ide