zoukankan      html  css  js  c++  java
  • px、em、rem、rpx 区别及应用场景

    px  像素  像素px是相对于显示器屏幕分辨率而言的

    em   子元素字体大小的em是相对于父元素字体大小。

    任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

    rem  是css3新增的相对单位  <html>元素。和em 的区别是 rem 相对于根元素,  通常做法是给html元素设置一个字体大小,然后其他元素的长度单位就为rem

    rem与em的选择?

    如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用;

    用于做响应式页面,不过我更倾向于rem,因为em不同元素的参照物不一样(都是该元素父元素),所以在计算的时候不方便,相比之下rem就只有一个参照物(html元素),这样计算起来更清晰。

    px 与 rem 的选择?

    对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可 。

    对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

    rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。

    无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度,拿iPhone6来讲,屏幕宽度为375px,把它分为750rpx后, 1rpx = 0.5px。

    微信小程序同时也支持rem尺寸单位, rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5 rpx

  • 相关阅读:
    浏览器渲染引擎工作原理
    js运行原理与机制
    新式网络浏览器幕后揭秘
    网站身份信息验证规则Cookie、Session、Token、JWT说明
    http简介
    react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)
    雅虎前端优化的35条军规
    服务端渲染与客户端渲染
    DataURL与File,Blob,canvas对象之间的互相转换的Javascript
    docker安装samba
  • 原文地址:https://www.cnblogs.com/benbonben/p/15123903.html
Copyright © 2011-2022 走看看