Question

我有一些CSS可以让整个网站内容左移和右移5em。

.content {
    margin-left: 5em;
    margin-right: 5em;
}

但是，当我在手机或触控板上进入网站时，我希望保证金不起作用（没有保证金）或只有1em的保证金。我尝试了以下代码但没有任何反应。更具体地说，我希望在使用我在每页上设置的初始比例的屏幕上激活，并且在1em上没有边距或仅有边距。而且我想它是唯一的手机和打击垫。

@media screen
 {
   .content {
      margin-left: 1em;
      margin-right: 1em;
    }
 }
 @media print
 {
   .content {
      margin-left: 1em;
      margin-right: 1em;
    }
 }
 @media screen,print
 {
   .content {
      margin-left: 1em;
      margin-right: 1em;
    }
 }

Answer 1

您可以使用指定width的媒体查询来实现：

@media (max-width: 640px){
    .content {
      margin-left: 1em;
      margin-right: 1em;
    }
}

请参阅此处常用设备宽度以选择所需宽度：http://mydevice.io/devices/

另外，请不要忘记在<head></head>标记中加入视口元素，以使其适用于您的手机：

...
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
...

Answer 2

您用于媒体查询的语法不正确。必须指定媒体查询将触发的宽度，换句话说，屏幕上的宽度，媒体查询中的代码将覆盖默认代码。

@media属性的语法是

 `@media not|only *mediatype* and (*media feature*) {
    CSS-Code;
}`

因此，您必须使用此代码来实现所需的结果：

@media (max-width: 667px){
    .content {
      margin-left: 1em;
      margin-right: 1em;
    }
}

不要在较小的屏幕上使用特定的CSS

2 个答案: