• rem 计算公式


    rem 量图计算公式:

    获取比值:设备尺寸/设计图尺寸 

    例如:设备宽度尺寸为   375px 、设计图尺寸为750px,计算获得比值为0.5,量得设计图上某个图片元素宽度为 100px,实际在375px宽度的设备上此元素为 100 * 0.5 = 50 px。

    故:

    设置html 下font-size 默认值为 0.5px,为了计算方便一般会以100倍计算,也就是50px,如下:

    @media screen and (min-375px) {
        html {
            font-size: 50px;
        }
    }

    如上,此时在375的设备上 1rem  =  50px,在写css 的时候设置其宽度为0.5rem即可(.5rem 就等于 50px 的实际设备上的宽度,换算到ui设计图上,也就是 100px)

    img.test_img{
        width : .5rem  
    }

    附上其他网友拷贝的小米官网的写法:

    // 小米官网的写法!function(n){
       // 获取window的document、dom-ele元素、i(ui设置图尺寸)、换算比率、监听对象名(orientationchange ios移动端横/纵向查看模式,resize 为window窗口尺寸改变事件)、定义方法a(处理html的font-size值)首先获取当前window的可见宽度,
    存在则为320,最大为750像素,也就是说只针对2种尺寸的变化、document对象监听之前得到的事件名(resize或ios的change)当文档加载完毕或者重置尺寸的时候重新设置
    var e=n.document, t=e.documentElement, i=750, d=i/100, o="orientationchange"in n?"orientationchange":"resize", a=function(){ var n=t.clientWidth||320;n>750&&(n=750); t.style.fontSize=n/d+"px" }; e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1)) }(window);
    成灰之前,抓紧时间做点事!!
  • 相关阅读:
    javascript base64 encode decode 支持中文
    php laravel v5.1 消息队列
    Linux C语言 取得MTU (最大传输单元)
    javascript 字符串 数字反转 字母大小写互换
    为Python安装Redis库
    php 日期相关的类 DateInterval DateTimeZone DatePeriod
    php安全 过滤、验证、转义
    python学习笔记之---多种方式实现list去重
    Python函数重载机制?
    说说下面几个概念:同步,异步,阻塞,非阻塞?
  • 原文地址:https://www.cnblogs.com/jony-it/p/11225143.html
Copyright © 2020-2023  润新知