Fatal编程技术网
  • html/
  • Html 我应该在CSS中使用px或rem值单位吗？

Html 我应该在CSS中使用px或rem值单位吗？

html css

Html 我应该在CSS中使用px或rem值单位吗？,html,css,distance,units-of-measurement,Html,Css,Distance,Units Of Measurement,我正在设计一个新网站，我希望它能与尽可能多的浏览器和浏览器设置兼容。我正试图决定我的字体和元素的大小应该使用什么计量单位，但无法找到一个结论性的答案 我的问题是：我应该在CSS中使用px还是rem 到目前为止，我知道使用px与在浏览器中调整基本字体大小的用户不兼容 我忽略了ems，因为它们在级联时比rems更难维护 有人说，rems与分辨率无关，因此更可取。但也有人说，大多数现代浏览器都会平均缩放所有元素，因此使用px不是问题 我问这个问题是因为对于CSS中最理想的距离度量有很多不同的意见，

我正在设计一个新网站，我希望它能与尽可能多的浏览器和浏览器设置兼容。我正试图决定我的字体和元素的大小应该使用什么计量单位，但无法找到一个结论性的答案

我的问题是：我应该在CSS中使用
px
还是
rem

  • 到目前为止，我知道使用
    px
    与在浏览器中调整基本字体大小的用户不兼容
  • 我忽略了
    em
    s，因为它们在级联时比
    rem
    s更难维护
  • 有人说，
    rem
    s与分辨率无关，因此更可取。但也有人说，大多数现代浏览器都会平均缩放所有元素，因此使用
    px
    不是问题
我问这个问题是因为对于CSS中最理想的距离度量有很多不同的意见，我不确定哪一个是最好的。

我发现为网站的字体大小编程的最好方法是为
主体定义一个基本字体大小，然后使用em（或rem）对于每一个
字体大小
，我在此之后声明。我想这是我个人的偏好，但这对我来说很好，也让我很容易加入一个更具吸引力的团队


就使用rem单元而言，我认为在代码的渐进性和对旧浏览器的支持之间找到平衡是很好的，这应该对你的决定有很大帮助。
em是前进的方向，不仅仅是字体，你还可以将其用于方框、线条粗细和其他东西，为什么


简单地说，em是唯一与浏览器中的alt+和alt-键同步缩放的对象

其他的测量尺度，但没有em那么干净

另一方面，如果您希望在缩放方面达到最佳效果，还可以在可能的情况下将图形转换为基于矢量的SVG，因为这些图形还可以根据浏览器的缩放比例进行清晰的缩放。
是。或者，更确切地说，不是

呃，我是说，没关系。使用对您的特定项目有意义的方法。PX和EM或两者同样有效，但根据整个页面的CSS架构，它们的行为会有所不同

更新：

为了澄清这一点，我要说的是，通常情况下，你使用哪一种可能并不重要。有时，您可能特别想选择其中一个。如果你可以从头开始，希望使用基本字体大小，并将所有相关内容都设置为基本字体大小，那么EMs是不错的选择

当您在现有代码库上重新设计时，通常需要px，并且需要px的特殊性来防止不良嵌套问题。
非常好地描述了
px
、
em
和
rem
的优缺点

作者最后得出结论，最好的方法可能是同时使用
px
和
rem
，首先声明
px
适用于旧浏览器，然后重新声明
rem
适用于新浏览器：


html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */



TL；DR:使用
px

事实

    

  • 首先，非常重要的是要知道，CSS
    px
    unit不等于一个物理显示像素。这一直都是事实——即使是在1996年
    
CSS定义参考像素，用于测量96 dpi显示器上像素的大小。在具有与96dpi基本不同的dpi的显示器（如视网膜显示器）上，用户代理重新缩放
    px
    单元，以便其大小与参考像素的大小匹配。换句话说，这就是为什么1个CSS像素等于2个物理视网膜显示像素的原因
    
这就是说，直到2010年（尽管有移动变焦的情况），px几乎总是等于一个物理像素，因为所有广泛使用的显示器都在96dpi左右
    • 

  • 在
    em
    s中指定的大小是相对于父元素的。这导致了
    em
    的“复合问题”，即嵌套元素逐渐变大或变小。例如：
    

    body { font-size:20px; } 
div { font-size:0.5em; }

    
给了我们：
    

    <body> - 20px
    <div> - 10px
        <div> - 5px
            <div> - 2.5px
                <div> - 1.25px

    

    -20px
-10px
-5px
-2.5px
-1.25px

    • 

  • CSS3
    rem
    ，它始终只与根
    html
    元素相关，现在在上受支持
    • 


意见
我认为每个人都同意这样的观点：设计适合每个人的页面，并考虑到视力受损的人是很好的。其中一个考虑因素（但不是唯一的！）是允许用户将站点的文本放大，以便更容易阅读

起初，为用户提供缩放文本大小的唯一方法是使用相对大小单位（如
em
s）。这是因为浏览器的字体大小菜单只是更改了根字体大小。因此，如果您在
px
中指定了字体大小，则在更改浏览器的字体大小选项时，它们不会缩放

现代浏览器（甚至不是很现代的IE7）都将默认的缩放方法改为只放大所有内容，包括图像和框大小。本质上，它们使参考像素变大或变小

是的，有人仍然可以更改浏览器默认样式表来调整默认字体大小（相当于旧式字体大小选项），但这是一种非常深奥的方法，我敢打赌没有人会这么做。（在Chrome中，它隐藏在高级设置、Web内容、字体大小下。在IE9中，它甚至更隐藏。你必须按Alt键，然后转到查看、文本大小。）只需在浏览器主菜单中选择缩放选项（或使用Ctrl++/-/鼠标滚轮）就更容易了

1-自然在统计误差范围内

如果我们假设大多数用户使用缩放选项缩放页面，我发现相对单位基本上是不相关的。当e

html {
    font-size: 12pt;
}



html {
    font-size: 16px;
}



html {
}

body {
  font-size:14px;
}

.someElement {
  width: 12px;
}



html {
  font-size:1px;
}

body {
  font-size:14rem;
}

.someElement {
  width: 12rem;
}