css - 编写 CSS 媒体查询的好习惯

Question

我对 CSS 媒体查询还很陌生。我实际上是在尝试针对不同的屏幕宽度调整按钮 ('Add+' 按钮，如附图所示) 的左边距。我正在尝试这样做:

 @media only screen  and (min-width: 200px) and (max-width: 350px)
    {
        .button_orange_extended
        {
            margin-left:0px;
        }
    }   /*Media query for one specific screen width*/



  @media only screen  and (min-width: 360px) and (max-width: 400px)
    {
        .button_orange_extended
        {

            margin-left:30px;
        }
    } /*Another Media query for  specific screen width*/



  @media only screen  and (min-width: 400px) and (max-width: 450px)
    {
        .button_orange_extended
        {

            margin-left:80px;
        }
    }

通过这种方式，我必须将此代码编写大约 10-12 次并相应地调整边距。考虑到我不仅需要调整手机的边距，还需要调整平板电脑等其他设备的边距。那么，是否有一个简短的替代方法？ (下图)。

Answer 1

您可以使用 em 而不是使用 px。 em 是相对于当前字体大小的，而 px 是绝对测量单位。因此，如果您在所有元素上都使用了 em，则只需更改 body 的 font-size。这样，您就不必为每个不同的屏幕宽度设置每个元素的大小，您只需更改字体大小。我用过 http://pxtoem.com/对于从 px 到 em 的转换，我建议初学者使用它。另外，一篇很好的文章描述了为什么你应该使用 em 而不是 px:Why em instead of px?