引用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、