版权声明:原创的文章转载请注明出处,谢谢! 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值的,当然这个是自定义的。