zoukankan      html  css  js  c++  java
  • 移动端 rem自适应布局 (750的设计稿)

    (function(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if (clientWidth >= 750) {
                    docEl.style.fontSize = '100px';
                } else {
                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                }
            };
    
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    复制代码

    1.如何使用?

    这是rem布局的核心代码,引入js,

    这段js代码的大意是:

    如果页面的宽度超过了750px,那么页面中html的font-size恒为100px,否则,页面中html的font-size的大小为: 100 * (当前页面宽度 / 750)

    2.为什么是750px?

    (1)iphone6设计图一般是750px的,1rem = 100px,从设计稿量出的数字小数点往左移动两位就好了

    注:rem是指相对于根元素(html)的字体大小(font-size)的单位。

    (2)Retina屏的iphone上,devicePixelRatio的值为2,也就是说1个pt(逻辑像素相当于2个px物理像素

     注:devicePixelRatio 为 设备px物理像素pt(逻辑像素的比例,详细说明请看http://www.mamicode.com/info-detail-2439333.html

  • 相关阅读:
    ubuntu安装软件失败
    阶乘函数 注意事项
    汇编退出
    vim比较文件
    汇编调试
    Redis
    记录一次ajax使用
    oracle11g导出dmp文件时不能导出空表,导致缺表
    将小数点后的0去掉
    redis
  • 原文地址:https://www.cnblogs.com/zhishaofei/p/14464942.html
Copyright © 2011-2022 走看看