编写CSS媒体查询的好习惯

Question

我对CSS Media查询相当新。我实际上是尝试为不同的屏幕宽度调整按钮（＆＃39;添加+＆＃39;按钮，如附图中所示）。我想这样做：

calculatedValue

通过这种方式，我得编写此代码大约10-12次并相应地调整保证金。考虑到我需要调整边距不仅适用于手机，还适用于平板电脑等其他设备。那么，是否有一种简短的替代方法？ （下图是图片）。

Answer 1

您可以使用px，而不是使用em。 em s与当前字体大小有关，而px是绝对测量单位。因此，如果您对所有元素使用em，则只需更改body的{​​{1}}即可。这样，您不必为每个不同的屏幕宽度设置每个元素的大小，您只需要更改字体大小。我已经使用http://pxtoem.com/从font-size转换为px，我建议初学者使用它。此外，还有一篇非常好的帖子，说明您应该使用em代替em的原因：Why em instead of px?

Answer 2

我认为您不需要媒体查询。您可以在 margin-left 上使用百分比。例如

margin-left: 80%

https://jsfiddle.net/Ld6025vf/

Answer 3

在我看来，这与响应式方法相反，在某种意义上，您似乎针对特定的设备屏幕大小，正如您所说，您必须为单个类写入相同的媒体查询10-12次这样做。此外，您似乎尝试以某种方式定位元素，在向上扩展时将其向右推进一些像素。那不行。最好的方法是使用您自己设计的框架或引导程序来创建一个网格，以便更容易管理定位元素。我永远不必使用超过四个媒体查询规则，然后将类，id; s等所有必需的异常放入其中。从移动设备开始，为您的班级设置默认值。这样，您不需要最小屏幕尺寸的媒体查询规则（总共很少的规则）;

.button_orange_extended {
// other additional rules if any
// you need no margin rule for left-margin here since it is set to 0 anyway
}
// Then you can set you media query exceptions to anything, example;
@media screen and (min-width: 300px) {
        .button_orange_extended {

        }
    }
@media screen and (min-width: 600px) {
        .button_orange_extended {

        }
    }
@media screen and (min-width: 1200px) {
        .button_orange_extended {

        }
    }