移动端REM布局方案

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

    首先,目前视觉稿大小分为640750以及,1125这三种。

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

    1a = 7.5px
    1rem = 75px

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

    3、

原文地址:https://www.cnblogs.com/hupan508/p/6159206.html