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、

  • 相关阅读:
    windows安装kafka
    excel打开utf-8的csv乱码
    laravel 记录慢sql日志
    php ftp连接的坑
    公用辅助方法
    ubuntu重置网络配置
    php socket
    docker ftp配置多个用户
    php aes-ecb-128位加密
    redis集群 哨兵模式
  • 原文地址:https://www.cnblogs.com/hupan508/p/6159206.html
Copyright © 2011-2022 走看看