1、没有设置 viewport 的情况下，不同尺寸下的手机屏幕默认宽度都是980宽；
2、设置 viewport 为固定的 width；
<meta name="viewport" content="width=360">
设置
<meta name="viewport" content="width=360"> 后，会使页面在不同设备上显示相同宽度，事例中不管 iPhone 5 或 iPhone 6 页面都会变成 360px 宽；3. 设置 viewport 为设备的 width 设置 <meta name="viewport" content="width=device-width"> 后，页面宽度会识别为硬件设备最优的宽度显示，这是使用最广泛的设置方式。
4、动态设置rem；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script> (function(doc,win,wid){ var rootEle = doc.documentElement, wid = wid || 750; recalc(); function recalc(){ rootEle.style.fontSize = 100*(rootEle.clientWidth/wid)+"px" } win.addEventListener('orientationchange',recalc,false); win.addEventListener('resize',recalc,false); })(document,window,750);</script> <style> *{margin: 0; padding: 0;} #full{background-color: red; font-size: 0;} .item{background-color: yellow; height: 2rem; width: 2rem; display: inline-block; margin: 0 3px 0 0; font-size: 14px;} </style> </head> <body> <div id="full"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> </body> </html>
传入的 750 为设计图总宽度，在任何屏幕宽度内，1rem 等于设计图中的 100px；
5、flexible.js
引入
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> 或者<script src="./node_modules/amfe-flexible/index.js"></script>
flexible主要做的三件事情
- 动态改写
<meta>标签 - 给
<html>元素添加data-dpr属性，并且动态改写data-dpr的值 - 给
<html>元素添加font-size属性，并且动态改写font-size的值 -
// 首先是一个立即执行函数，执行时传入的参数是window和document (function flexible (window, document) { var docEl = document.documentElement // 返回文档的root元素 var dpr = window.devicePixelRatio || 1 // 获取设备的dpr，即当前设置下物理像素与虚拟像素的比值 // 调整body标签的fontSize，fontSize = (12 * dpr) + 'px' // 设置默认字体大小，默认的字体大小继承自body function setBodyFontSize () { if (document.body) { document.body.style.fontSize = (12 * dpr) + 'px' } else { document.addEventListener('DOMContentLoaded', setBodyFontSize) } } setBodyFontSize(); // set 1rem = viewWidth / 10 // 设置root元素的fontSize = 其clientWidth / 10 + ‘px’ function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' } setRemUnit() // 当页面展示或重新设置大小的时候，触发重新 window.addEventListener('resize', setRemUnit) window.addEventListener('pageshow', function (e) { if (e.persisted) { setRemUnit() } }) // 检测0.5px的支持，支持则root元素的class中有hairlines if (dpr >= 2) { var fakeBody = document.createElement('body') var testElement = document.createElement('div') testElement.style.border = '.5px solid transparent' fakeBody.appendChild(testElement) docEl.appendChild(fakeBody) if (testElement.offsetHeight === 1) { docEl.classList.add('hairlines') } docEl.removeChild(fakeBody) } }(window, document))
6.vw && vh
根据CSS3规范，视口单位主要包括以下4个：
1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。
3.vmin：选取vw和vh中最小的那个。
4.vmax：选取vw和vh中最大的那个。