html非框架适配wrap端方法

1.百分比/vw 适配

css使用 百分比单位 / vw 适应各种宽度(1vw == 1%的视口宽度)设计图尺寸也需要换算成%优点: 简单可指定属性适配 缺点: 需要计算%

---

2.js动态修改 meta name=viewport

利用viewport 内的 “initial-scale=缩放比例” 缩放页面html 按照设计图该多少px 就写多少pxhead添加 meta 和 js <!--定义一个 meta--> <meta id="viewport" name="viewport" > function set_meta_viewport(design_width = 750) { // design_width 为设计图尺寸 const equipment_width = window.screen.width; // 只能以设备尺寸为指标(用html宽度会无限递归) let meta = document.querySelector('#viewport'); const scale = equipment_width / design_width; // 这里控制缩放比例 1px: 750设计图的1px meta.setAttribute('content', `width=device-width, initial-scale=${scale},maximum-scale=${scale}, user-scalable=no`); } window.addEventListener('resize', ()=>set_meta_viewport()); set_meta_viewport(); 优点: 不需要计算 缺点: 全局缩放(无法指定属性适配)只有wrap端生效

---

3.css/js 控制 rem适配

利用1rem == html: fontsize 特性动态修改所有rem尺寸css rem 使用 media 判断动态配置 html的fontsize属性js rem 动态修改 html的fontsize属性head添加 meta 和 js <!-- 设置页面宽度为设备宽度 同时禁止缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1, user-scalable=no"> function set_rem(design_width = 750){ // 参数 design_width 为设计图宽度 const equipment_width = document.documentElement.offsetWidth; // 以html宽度为缩放指标 // const equipment_width = window.screen.width; // 以设备宽度为缩放指标 document.documentElement.style.setProperty('font-size', (equipment_width / design_width) + 'px'); } window.addEventListener('resize', ()=>set_rem()); set_rem(); 使用:(以上代码适配比例为 “1rem == 总宽度750px屏幕的1px” )优点: 可以控制指定属性随适配变化pc端 / wrap端同样适用 缺点: 影响了 根节点的fontsize属性