移動端自適應解決方案

標籤：round   event   rem   number   pos   attribute   ica   sel   meta   

http://dudodo.cc/2017/06/01/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/#more  設計稿640640px = 6.4rem100px = 1rem10px = 0.1rem1px = 0.01rem (function (doc, win) {var docEl = doc.documentElement,resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,designSize = 640 var recalc = function () {var clientWidth = docEl.clientWidth,clientHeight = docEl.clientHeight;if (!clientWidth) return;if (clientWidth >= designSize) {docEl.style.fontSize = (designSize / 10) + (clientWidth / clientHeight * 10) + ‘px‘} else {docEl.style.fontSize = 100 * (clientWidth / designSize) + ‘px‘;}} if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener(‘DOMContentLoaded‘, recalc, false);})(document, window)   @media only screen and (min-width:481px) {html {font-size: 94%!important /* 15.04÷16=94% */}} @media only screen and (min-width:561px) {html {font-size: 109%!important /* 17.44÷16=109% */}} @media only screen and (min-width:641px) {html {font-size: 125%!important /* 20÷16=125% */} body {max-width: 640px}} body {font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;background-color: #ddd;min-width: 320px;margin: 0 auto;position: relative}

移動端自適應解決方案