CSS中px、em、rem的区别及使用场景

三者的区别:

  • px是固定的像素,一旦设置了就无法因为适应页面大小而改变。
  • em和rem相对于px更具有灵活性,他们是相对长度单位,其长度不是固定的,更适用于响应式布局。
  • em是相对于其父元素来设置字体大小,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小。而rem是相对于根元素,这样就意味着,只需要在根元素确定一个参考值。

使用场景:

  • 对于只需要适配少部分移动设备,且分辨率对页面影响不大的,使用px即可 。
  • 对于需要适配各种移动设备,使用rem,例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。

相关推荐

  1. CSSpx、em、rem区别使用场景

    2024-03-17 14:36:04       40 阅读
  2. js! 、!!、?.、??、??=用法使用场景

    2024-03-17 14:36:04       24 阅读
  3. C/C++ 引用和指针区别使用场景

    2024-03-17 14:36:04       32 阅读
  4. Flink Sql和Flink DataStream区别使用场景

    2024-03-17 14:36:04       21 阅读
  5. mybatis$和#区别以及各自使用场景

    2024-03-17 14:36:04       35 阅读
  6. jsonchange使用场景如何使用

    2024-03-17 14:36:04       88 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-17 14:36:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-17 14:36:04       100 阅读
  3. 在Django里面运行非项目文件

    2024-03-17 14:36:04       82 阅读
  4. Python语言-面向对象

    2024-03-17 14:36:04       91 阅读

热门阅读

  1. CSS 面试题及答案

    2024-03-17 14:36:04       37 阅读
  2. 安卓UI面试题 56-60

    2024-03-17 14:36:04       35 阅读
  3. Android启动优化

    2024-03-17 14:36:04       35 阅读
  4. 蓝桥杯构造法|两道例题(C++)

    2024-03-17 14:36:04       41 阅读
  5. 《工厂模式(极简c++)》

    2024-03-17 14:36:04       42 阅读
  6. SpringMVC启动与请求处理流程解析

    2024-03-17 14:36:04       44 阅读
  7. 使用Go Validator在Go应用中有效验证数据

    2024-03-17 14:36:04       48 阅读