开始前:一定要记住,在iphone5下,1rem=16px;
图示:
下面开始三个步骤: 1.获取html的宽
操作代码:
let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;//有些浏览器documentElement获取不到,那就使用后面的body
2.获取htmlDom元素 let htmlDom=document.getElementByTagName('html')[0]
3.设置html样式 htmlDom.style.fontSize=htmlwith/20+'px';
完整代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><style> * { margin: 0; padding: 0; } .test{ width: 20rem; height: 10rem; background-color: skyblue; text-align: center; } .hello{ color: red; font-size: 1rem; }</style><body> <div class="test"> <div class="hello">hello JSPang</div> </div></body></html><script> // 三个步骤: // 1.获取html的宽, let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;//有些浏览器documentElement获取不到,那就使用后面的body console.log(htmlwidth); // 2.htmlDom let htmlDom=document.getElementsByTagName("html")[0] console.log(htmlDom); //3.设置根元素样式 htmlDom.style.fontSize=htmlwidth/20+'px';//记住这个20是等份的意思,这样每一份是16px,即1rem=16px; </script>
效果:点击不同的设备后刷新,都可以适配.
上面再进行优化:添加监听事件,让它自动监听窗口变化动态改变.
完整代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><style> * { margin: 0; padding: 0; } .test{ width: 20rem; height: 10rem; background-color: skyblue; text-align: center; } .hello{ color: red; font-size: 1rem; }</style><body> <div class="test"> <div class="hello">hello JSPang</div> </div></body></html><script>function gethtmlfontsize(){ // 三个步骤: // 1.获取html的宽, let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;//有些浏览器documentElement获取不到,那就使用后面的body console.log(htmlwidth); // 2.htmlDom let htmlDom=document.getElementsByTagName("html")[0] console.log(htmlDom); //3.设置根元素样式 htmlDom.style.fontSize=htmlwidth/20+'px';}// 调用一次gethtmlfontsize();// 添加监听事件(resize是监听的意思)window.addEventListener('resize',gethtmlfontsize)</script>
效果:
上面是参考iphone5的320宽的写法,iphone678代码如下:
<script> /** * ================================================ * 设置根元素font-size * 当设备宽度为375(iPhone6)时，根元素font-size=16px; × ================================================ */(function (doc, win) { var docEl = win.document.documentElement; var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; var refreshRem = function () { var clientWidth = win.innerWidth || doc.documentElement.clientWidth || doc.body.clientWidth; console.log(clientWidth) if (!clientWidth) return; var fz; var width = clientWidth; fz = 16 * width / 375; docEl.style.fontSize = fz + 'px';//这样每一份也是16px,即1rem=16px }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, refreshRem, false); doc.addEventListener('DOMContentLoaded', refreshRem, false); refreshRem();})(document, window);</script>
补充:禁止客户双指缩放办法
最后附上一个更完美的解决方案(用别人写好的hotcss.js文件,你就可以直接写px像素,它会自动帮你转成rem):
我的收藏的hotcss.js文件地址
hotcss.js文件拷贝到viewport.js里,然后在webpack.config.js里面引入即可.