zoukankan      html  css  js  c++  java
  • 单位px和em,rem的区别

    px

    相对长度单位。像素(Pixel)。

    像素是相对于显示器屏幕分辨率而言的。例如,WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。(css手册3.0)

    em

    相对长度单位。相对于当前对象内文本的字体尺寸。

    如当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 (css手册3.0)

    google的默认字体高是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

    rem

    是css3新增的相对长度单位,相对于html根元素设置的文本尺寸单位。只需设置根元素尺寸,则内容所有字体可按比例调整大小。

    对于需要适配各种移动设备,会使用rem长度单位,采用媒体查询方法获取分辨率设置html根元素大小

    /*移动端适配*/
    @media screen and (min- 320px){
        html{
            font-size: 16px;
        }
    }
    @media screen and (min- 360px){
        html{
            font-size: 18px;
        }
    }
    @media screen and (min- 375px){
        html{
            font-size: 18.75px;
        }
    }
  • 相关阅读:
    html5结构标签
    video标签、audio标签
    a标签、img图片、iframe、表单元素、div
    pre,html转义,abbr缩写,表格table
    html 列表标签
    p,br,hn,b,i,u,s,sup,sub标签
    网站开发准备学习
    交互原型设计工具
    为什么要重写hashCode()方法和equals()方法及如何重写
    Java接口回调
  • 原文地址:https://www.cnblogs.com/mr17/p/12213653.html
Copyright © 2011-2022 走看看