移动web(h5页面)适配

版权声明：原创的文章转载请注明出处，谢谢！ https://blog.csdn.net/weixin_41804429/article/details/84890781

最近接触了h5页面，其实它跟pc也没有多大区别，主要是屏幕适配问题，其他基本上是一样的。

适配移动端的话，可以用rem单位，媒体查询，百分比布局等等，可以结合使用也可以单独使用。我做的两个项目不是很复杂，就用了rem单位，这基本也够用了。

1rem 等于 html的font-size. 所以我们动态获取到屏幕的宽度做些运算赋值给html的font-size, 再我们页面中所有css单位都用rem,这样就可以做到页面内容根据屏幕宽度变化而适应。代码如下：

//获取屏幕宽度
var htmlWidth = document.documentElement.clientWidth || documnet.body.clientWidth ;
//更新html font-size
var htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = htmlWidth/10 + 'px';

一般是把屏幕宽度除于10作为font-size值的，当然这个是自定义的。