html非框架适配wrap端方法

1.百分比/vw 适配

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

---

2.js动态修改 meta name=viewport

• 利用viewport 内的 “initial-scale=缩放比例” 缩放页面
• html 按照设计图该多少px 就写多少px
• head添加 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属性