标签:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>
html,body{font-size: 62.5% } 各大主流浏览器的fong-size:1rem=16px;这是默认的浏览器; 后边的布局按照正常的写法即可
<script type=”text/javascript”> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’, recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=640){ docEl.style.fontSize = ‘100px’; }else{ docEl.style.fontSize = 100 * (clientWidth / 640) + ‘px’; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener(‘DOMContentLoaded’, recalc, false); })(document, window); </script>
a, 简写语法 @media (min-width:800px) { … } 当页面大于800px的时候执行它里边的CSS b, 复杂表达式 @media (min-width:800px) and (max-width:1200px) { … } 当页面大于800px,小于1200px的时候执行它里边的CSS c, 高度和宽度媒体查询 @media (min-width:800px) and (min-height:400px) { … } 当页面宽度大于800px,高度大于400px的时候执行它里边的CSS
标签:
原文地址:http://www.cnblogs.com/amy-1205/p/5826702.html