em,rem,px,百分数，媒体查询，如何抉择？

最新推荐文章于 2025-03-26 00:15:00 发布

elephant230

最新推荐文章于 2025-03-26 00:15:00 发布

阅读量768

点赞数 1

分类专栏： css 文章标签： rem em 适配

本文链接：https://blog.youkuaiyun.com/elephant230/article/details/95982382

版权

css 专栏收录该内容

2 篇文章

订阅专栏

说到浏览器适配，关于这四位大神，我也始终迷迷糊糊的，可以根据平时的工作总结，暂时做个简单的分析。

em,rem相对于px来说，都属于相对长度的单位，

一

px为固定值，无论面对哪一款浏览器，px值为多少其元素大小就为多少。

即浏览器使用 px 值，所以 1px 将始终显示为 1px。

px不多赘述。

二

rem 就是相对于根元素的font-size大小。比如，网页的body,html元素，设置font-size 为18px,那么1rem就是18px。

em是相对于当前元素的font-size大小。比如，当前元素div的font-size为14px，那么width：60em，值就是14px*60 = ↵

0p'x。如果使用em单位时，一般font-size设置为10px、100px计较方便计算。

一直以来误解em为相对于父元素的像素大小，其实这种说法侧重于元素大小的继承，

如果自身有font-size的设置，那么就会覆盖其父元素的font-size值。

三

百分制

更多适用于页面中面积较大的元素，比如每个页面都有一个版心，如果同一代码适应不同的浏览器宽度，那么采用百分制是一种事半功倍的方法。

比如直接将版心div的宽度设置为80%；margin为0 auto；那么页面效果保持不变，始终自适应视口宽度。

还有一种情况，推荐使用百分制。比如写瀑布流时，两列或多列，都可以使用百分制来表示列宽。

综上所述，写了一组代码作证：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实验</title>
</head>
<body>
    <div class="father">
        <div class="container">
            <div class="title">hello world</div>
            <p class="content">blalblalalalalalalalal</p>
        </div>
        
    </div>
    <!-- rem是根据html的font-size大小为基准，来定义大小值，在浏览器端最终转换为px值 -->
    <!-- em是根据当前元素的font-size大小为基准，来定义大小值，在浏览器端最终转换为px值  -->
</body>
<style>
    html{
        font-size:18px;
    }
    .container{
        width: 80%;  /* 大面积的div采用百分制来计算 */
        margin:0 auto;
        font-size:16px;
        background-color: skyblue;
    }
    .title{
        padding:2rem 0;
        width: 10rem;  /* 10*18=180px  依照html 的font-size值来计算 */
        height: 3rem;  /* 3*18=54px  依照html 的font-size值来计算 */
        background-color: pink;
    }
    .content{
        font-size:14px; 
        width: 60em;   /* 60*14=840px  不会依照父元素container的font-size值来计算 */
        height: 3em;    /* 3*14=42px  不会依照父元素container的font-size值来计算 */
    }
</style>
</html>

仔细看一看computed 结果，即可得知。

四：

还要再说一说媒体查询：

这种方法是最保险的一种方式，一个页

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

参考文档：https://www.runoob.com/cssref/css3-pr-mediaquery.html

平时自己常用的一套媒体查询：

@media only screen and (min-width: 320px) and (max-width: 374px) {
	html {
		font-size: 13.6533px !important;
	}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
	html {
		font-size: 16px !important;
	}
}
@media only screen and (min-width: 414px) and (max-width: 429px) {
	html {
		font-size: 17.664px !important;
	}
}
@media only screen and (min-width: 430px) and (max-width: 765px) {
	html {
		font-size: 18.3467px !important;
	}
}
@media only screen and (min-width: 768px) {
	html {
		font-size: 32.768px !important;
	}
}

具体到页面中的元素最佳单位选用rem；

苹果手机的一套媒体查询：

/* iphone 3 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }
/* iphone 4 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 6, 6s */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 7, 8 */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 6+, 6s+, 7+, 8+ */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }
/* iphone X */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }

今天又翻了翻苹果官网，发现苹果程序员在开发官网时，既用到了px，也用到了em和媒体查询。值得模仿学习。

其中，letter-spaceing使用em

其媒体查询中的宽度分为四个范围：（body的font-size：17px）

@media only screen and (min-width: 1069px)and (max-width: 1441px)

@media only screen and (min-width: 769px) and (max-width: 1068px)

@media only screen and (min-width: 736px) and (max-width: 768px)

@media only screen and (max-width: 735px)

（写到这里，觉得数据不够科学，还需要考证）

四点1：

配合媒体查询的两套或多套结构样式

还有一种最保险的媒体查询方式，即一个页面写两套结构，一套结构适应pc端一套建构适用于移动端，每套结构都有其适用的一套样式表。通常以1080px为界限，大于该值显示pc页面，小于该值显示移动端页面（之前文章有记录，不必赘述）

五：

压轴出场的是rem.js，因为它最省事，便捷

在static中写rem.js代码（如下）

在index.html中引入，即可，你可以在控制台查看html元素font-size的computed值，在每个组件或是页面中使用rem单位。

(function (designWidth, maxWidth) {
  var doc = document
  let win = window
  var docEl = doc.documentElement
  var tid
  var rootItem, rootStyle
  console.log('rem.js')
  function refreshRem () {
    var width = docEl.getBoundingClientRect().width
    if (!maxWidth) {
      maxWidth = 540
    }
    ;
    if (width > maxWidth) {
      width = maxWidth
    }
    // 与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
    var rem = width * 100 / designWidth
    // 兼容UC开始
    rootStyle = 'html{font-size:' + rem + 'px !important}'
    rootItem = document.getElementById('rootsize') || document.createElement('style')
    if (!document.getElementById('rootsize')) {
      document.getElementsByTagName('head')[0].appendChild(rootItem)
      rootItem.id = 'rootsize'
    }
    if (rootItem.styleSheet) {
      rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
    } else {
      try {
        rootItem.innerHTML = rootStyle
      } catch (f) {
        rootItem.innerText = rootStyle
      }
    }
    // 兼容UC结束
    docEl.style.fontSize = rem + 'px'
  };
  refreshRem()

  win.addEventListener('resize', function () {
    clearTimeout(tid) // 防止执行两次
    tid = setTimeout(refreshRem, 300)
  }, false)

  win.addEventListener('pageshow', function (e) {
    if (e.persisted) { // 浏览器后退的时候重新计算
      clearTimeout(tid)
      tid = setTimeout(refreshRem, 300)
    }
  }, false)

  if (doc.readyState === 'complete') {
    doc.body.style.fontSize = '16px'
  } else {
    doc.addEventListener('DOMContentLoaded', function (e) {
      doc.body.style.fontSize = '16px'
    }, false)
  }
})(375, 750)
// 代码方案二：
// window.onload = function () {
//   getRem(720, 100)
// }
// window.onresize = function () {
//   getRem(720, 100)
// }
// function getRem (pwidth, prem) {
//   var html = document.getElementsByTagName('html')[0]
//   var oWidth = document.body.clientWidth || document.documentElement.clientWidth
//   html.style.fontSize = oWidth / pwidth * prem + 'px'
// }

借鉴网友的总结：