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; } }
  • 相关阅读:
    php No input file specified 错误提示
    yii 隐藏index.php
    phpstudy 配置 sqlserver
    xdebug3 配置信息
    composer 更新
    mysql 命令行 导入大型文件
    使用 DBExportDoc V1.0 For MySQL 导出数据库表结构说明文档
    聚合数据接口调用实例
    servlet
    JDBC
  • 原文地址:https://www.cnblogs.com/zml-mary/p/7294417.html
Copyright © 2011-2022 走看看