zoukankan      html  css  js  c++  java
  • rem布局和hotcss原理分析

    rem布局的开源方案hotcss, 其原理个人理解如下:

    手机px = (手机页面宽度/设计稿宽度) * 设计稿px 

    手机rem = 手机px / fontSize 

                = (手机页面宽度/设计稿宽度) * 设计稿px / fontSize

         = (设备屏幕宽度/设计稿宽度) * 设计稿px / fontSize

    hotcss对fontSize的设定

    root fontSize = (设备屏幕宽度/320) * 20 = 设备屏幕宽度/16, 将页面16等分,1rem = 1/16 设备宽度

    于是

    手机rem = (设备屏幕宽度/设计稿宽度) * 设计稿px / ((设备屏幕宽度/320) * 20)
                = 设计稿px * 320 /设计稿宽度/20  = 设计稿px / (设计稿宽度/16)

    手机rem可以理解为一个比率,就是设计稿px占设计稿宽度1/16的比率,此比率应该与手机px占手机屏幕宽度1/16的比率相等,即是手机的rem

    hotcss对viewport的设定

    scale = 1/dpr

    viewport = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=no'

    于是

    手机px 变为 手机px/dpr

    得到真实的1px

    其中320和20,作者的解释如下, 本人无法理解

    1. 16rem。相当于设计稿的100%。
    2. 320是认为页面是320像素。
    3. 20是每份的的宽度。因为10px在某些浏览器无法显示(最小12px)所以选择了每份20。
    4. 据此可推断,16份即为320px。也即我们认为的页面宽度。

  • 相关阅读:
    鬼谷子 简单飞扬
    JavaScript 随笔汇集 简单飞扬
    p2p学习 简单飞扬
    p2p知识 简单飞扬
    使用 JFreeChart来创建基于web的图表 简单飞扬
    Javascript中最常用的55个经典技巧 简单飞扬
    庆祝在博客园申请博客成功
    读《WCF技术剖析》(卷一)笔记(一)
    常用字符串截取类
    创建yum本地源 转帖
  • 原文地址:https://www.cnblogs.com/mengff/p/6279316.html
Copyright © 2011-2022 走看看