zoukankan      html  css  js  c++  java
  • css3:rem单位

    px:相对于显示屏屏幕分辨率而言

    em:相对于父元素的字体尺寸

    rem:相对于根节点(即html标签)字体尺寸

    浏览器默认字体大小:16px

    html {
    font-size:62.5%;/*10 ÷ 16 × 100% = 62.5%   只是方便了计算,但chrome现在最小字体大小 12px 可以直接用px,设置font-size:20px;则1rem为20px*/
    }
    body {
    font-size:1.4rem;/*1.4 × 10px = 14px */
    }

    兼容性:

    除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,会忽略rem设定的字体大小,此时可多写一个绝对单位的声明。故考虑兼容性,一般使用px,或者px和rem两者结合使用

    为什么很多web app上使用rem?

    (1)没有em多次计算的麻烦

    (2)让移动端字体和间距自适应

             a、移动端最多的用法就是,前置一段脚本,计算当前设备的尺寸,根据尺寸动态定义根元素的字体大小,这样页面定义的元素就可以自适应的改变

             b、媒体查询方式

    @media only screen { html { font-size: 30px; } }
    @media only screen and (max- 479px) and (min- 321px)
    { html { font-size: 15px; } }
    @media only screen and (max- 320px)
    { html { font-size: 13px; } }
  • 相关阅读:
    如何打日志才能方便排查问题?
    为什么 HashMap 并发时会引起死循环?
    Spring 为什么会有 FactoryBean?
    常用 Git 使用技巧,收藏了~
    Gin中context的使用
    Gin的路由算法
    k8s中的网络通信总结
    k8s架构
    Golang中的值拷贝与引用拷贝
    golang知识要点总结
  • 原文地址:https://www.cnblogs.com/zml-mary/p/7294417.html
Copyright © 2011-2022 走看看