zoukankan      html  css  js  c++  java
  • rem

    rem单位

    rem是一个相对的单位,他是相对于根元素html来说的,我们只需要在根元素确定一个参考值就可以,其它元素设置rem大小都是以html的字体大小设置为参考值进行一个字体大小缩放,我们可以对html的根元素的字体进行设置,(如果没有进行设置,默认的html的根元素的大小是16px);

    我们来看一个简单的代码实例:

    html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}  // 62.5% =10px; 
    body {font-size: 1.6rem;/*1.6 × 10px = 16px */}
    h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

    我在根元素<html>中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算:1.2rem即 12px ,1.6rem即16px  。 如果没有设置,将是以浏览器默认的“16px”为基准 )。

    rem属性浏览器兼容性

    rem是CSS3新引进来的一个度量单位,支持的浏览器还是蛮多的,比如:Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。

    【需要注意的问题:谷歌浏览器不支持10px及以小的字体,默认最小的字体为12px,所以如果用了 ”62.5%“,并且元素尺寸也用"rem"的话在谷歌浏览器显示,元素显示的尺寸比原来设计的要大很多,造成页面错位。解决的办法是将"font-size: 62.5%;"改为"font-size:20px;"即"1rem = 20px"】。

    在页面遇到字体小于12px的情况是可以使用,谷歌低版本的浏览器可以设置 -webkit-text-size-adjust:none; 高版本的浏览器对此不适用;高版本浏览器的解决方法是: font-size: 12px;-webkit-transform-origin-x: 0;  -webkit-transform: scale(0.90);

  • 相关阅读:
    【剑指Offer】34、第一个只出现一次的字符
    【剑指Offer】33、丑数
    【剑指Offer】32、把数组排成最小的数
    linux精彩收集
    shell-总结【摘录】
    linux -特殊符号
    linux --mount
    linux--lsof
    linux--find
    Linux之rsync数据同步服务
  • 原文地址:https://www.cnblogs.com/orange2013/p/7420632.html
Copyright © 2011-2022 走看看