H5在移动端尺寸适配方案

Posted 2023-04-23

参考技术A 要使用rem，就要设置root font size，一般我们设置root font size 等于设计稿宽度的十分之一就可以了。比如750px宽度的设计稿，设置root font size为75px即可。也就是说1rem=75px

首先要根据页面尺寸变化，设置root font size，然后根据设计稿，自己计算好px和rem的对应关系，再写rem。

这种方式较为繁琐 不推荐

这里插件设置root font size方法如下：

安装后，在输入px单位时，会自动弹出转换为rem的选项。

参考博客

公司中比较常用，推荐这种方式。

安装后首先要启用vw支持，否则只有rem，并且还要设置设计稿宽度。

再使用px的时候会弹出供选择的vw转换结果。

移动端高清适配布局开发解决方案

前言：移动端的适配是个大问题，特别是安卓，国内版本众多，不规则的dpr数不胜数，为了适配各种移动终端，网易、百度、阿里各大厂都有自己的适配解决方案。要解决哪些问题呢？

• 不同设备下的统一视觉体验。
• 不需要手动设置viewport，根据当前环境计算出最适合的viewport。
• 支持任意尺寸的设计图，不局限于特定尺寸的设计图。
• 支持单一项目，多种设计图尺寸，专为解决大型，长周期项目。
• 支持px2rem转换方法，CSS布局，原始值不丢失。
• 有效解决移动端1像素问题。

 

1、首推阿里的flexible适配方案，酷、靓、好用。阿里无线前端团队开发的，手淘的H5页面在使用。

　　github传送门：https://github.com/amfe/lib-flexible/ 

　　flexible详解：https://github.com/amfe/article/issues/17

　　flexible一个案例：http://huodong.m.taobao.com/act/yibo.html

 

2、墨尘大大写的hotcss，比flexible稍轻量，开发利器。

　　github传送门：https://github.com/imochen/hotcss 

　　hotcss一个案例：http://imochen.github.io/hotcss/example/normal/

 

3、插件px2rem保留源文件px，将px转化成rem

　　npmjs传送门：https://www.npmjs.com/package/px2rem

　　配合gulp使用：gulp-px3rem  https://www.npmjs.com/package/gulp-px3rem

　　配合webpack使用：px2rem-loader  https://www.npmjs.com/package/px2rem-loader