移动端REM布局方案

Posted 2020-08-22 hupan508

引用http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html的方案

下载地址https://github.com/hupan508/lib-flexible

注意点。

　　1、如果html设置过 meta  ，js将使用meta 标签的缩放。

　　　　<meta http-equiv="X-UA-Compatible" content="IE=edge">
　　　　<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
　　　　<meta content="telephone=no" name="format-detection" />
　　　　<meta content="yes" name="apple-mobile-web-app-capable" />
　　　　<meta content="yes" name="apple-touch-fullscreen" />
　　　　<meta content="telephone=no,email=no" name="format-detection" />

　　　　如果加入meta字体写一种px就可以

　　　　关于媒体查询在不同设备下使用图片请查看

　　　　http://www.uigreat.com/api/client_manager/index.php?aid=239&module=content&wenzhang

　　　　常见媒体查询

　　　　https://segmentfault.com/a/1190000002711737

　　2、cssrem

　　　　使用cssrem工具，换算px--rem 

　　　　修改换算比例

　　　　参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem

• 　　px_to_rem - px转rem的单位比例，默认为40。
• max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。
• available_file_types - 启用此插件的文件类型。默认为：[".css", ".less", ".sass"]。

 

　　把视觉稿中的px转换成rem

　　　　首先，目前视觉稿大小分为640，750以及，1125这三种。

　　　　当前方案会把这3类视觉稿分成100份来看待（为了以后兼容vh，vw单位）。每一份被称为一个单位a。同时，1rem单位认定为10a。拿750的视觉稿举例：

　　　　1a = 7.5px
　　　　1rem = 75px

　　　　因此，对于视觉稿上的元素的尺寸换算，只需要原始px值除以rem基准px值即可。例如240px * 120px的元素，最后转换为3.2rem * 1.6rem。

 

　　　　3、