HTML5移动端实现自适应

1. 添加meta标签：viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

2. 将下面代码添加到需要的页面中：

 1 (function flexible (window, document) {
 2   var docEl = document.documentElement
 3   var dpr = window.devicePixelRatio || 1
 4 
 5   // adjust body font size
 6   function setBodyFontSize () {
 7     if (document.body) {
 8       document.body.style.fontSize = (12 * dpr) + 'px'
 9     }
10     else {
11       document.addEventListener('DOMContentLoaded', setBodyFontSize)
12     }
13   }
14   setBodyFontSize();
15 
16   // set 1rem = viewWidth / 10
17   function setRemUnit () {
18     var rem = docEl.clientWidth / 10
19     docEl.style.fontSize = rem + 'px'
20   }
21 
22   setRemUnit()
23 
24   // reset rem unit on page resize
25   window.addEventListener('resize', setRemUnit)
26   window.addEventListener('pageshow', function (e) {
27     if (e.persisted) {
28       setRemUnit()
29     }
30   })
31 
32   // detect 0.5px supports
33   if (dpr >= 2) {
34     var fakeBody = document.createElement('body')
35     var testElement = document.createElement('div')
36     testElement.style.border = '.5px solid transparent'
37     fakeBody.appendChild(testElement)
38     docEl.appendChild(fakeBody)
39     if (testElement.offsetHeight === 1) {
40       docEl.classList.add('hairlines')
41     }
42     docEl.removeChild(fakeBody)
43   }
44 }(window, document))

 

3. 尺寸默认大小

引入文件后会发现html这个根的font-size在iphone6的情况下37.5px，按照尺寸就可以进行布局了，当然布局也是rem单位

简单来说，你的盒子假设是50px，那就是50/37.5=1.333333rem。字体是16px，那就是16/37.5=0.426666rem。

posted @ 2020-01-10 11:12  MrSher  阅读(1575)  评论(0)  编辑  收藏  举报