zoukankan      html  css  js  c++  java
  • 移动端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、

  • 相关阅读:
    行测-民法典
    行测-中心理解
    行测-资料分析
    行测-数量关系
    行测-三视图、截面图、立体拼合
    行测-加强题型
    C# Unity游戏开发——Excel中的数据是如何到游戏中的 (四)2018.4.3更新
    UGUI batch 规则和性能优化
    Unity 绘图性能优化
    Unity UGUI —— 鼠标穿透UI问题(Unity官方的解决方法)
  • 原文地址:https://www.cnblogs.com/hupan508/p/6159206.html
Copyright © 2011-2022 走看看