h5页面适配方法
程序员文章站
2024-02-29 18:44:28
...
1.viewport
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
width=device-width :页面宽度为设备屏幕的宽度
initial-scale=1.0:初始的缩放比
minimum-scale=0.5:最小缩放比
maximum-scale=2.0:最大缩放比
user-scalable=yes:是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许
根据viewpot,可以根据设备屏幕宽度与设计稿宽度计算出缩放比,设置initial-scale就可以达到适配效果;缺点:原生组件(例:video)中的控件大小会进行缩放
(function() {
var target = 750; //设计图纸的大小
var scale = window.screen.width / target; //计算出缩放比例
var meta = document.createElement("meta");
meta.name = "viewport";
meta.content = "width=device-width, initial-scale=" + scale + ", user-scalable=no";
document.head.appendChild(meta);
})()
2.rem相对单位
rem 相对的是HTML根元素的字体大小,我们只需要将html的字体大小设置为**(屏幕宽度 / 设计稿宽度)px**,就可以将屏幕分为(设计稿宽度)份;例:设计稿宽度为750px,将根字体设置为(屏幕宽度 / 750)px, 就将屏幕宽度分为750份;编写样式时就可以用1rem替代设计稿上的1px。
// 获取屏幕宽度
let width = document.documentElement.clientWidth || document.body.clientWidth;
let r = width / 750; //计算字体大小
// 获取html元素
let a = document.getElementsByTagName('html')[0];
//设置html字体大小
a.setAttribute('style', 'font-size:' + r + 'px');
3.vw适配
vw:视窗宽度的百分比,1vw=1%视窗宽度;
设置大小时只需设置为(元素尺寸 / 设计稿宽度)*100 vw 即可