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

Question

我有一些 CSS 可以让整个网站内容的左右边距为 5em。

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

但是，当我在移动设备 phone 或触摸板上输入网站时，我希望边距不起作用（没有边距）或只有 1em 的边距。我尝试了以下代码，但没有任何反应。更具体地说，我希望它被激活，并且在使用我在每一页上设置的初始比例的屏幕上没有边距或只有 1em 的边距。我想它只有 phones 和垫子。

@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> 标签中包含视口元数据以使其适用于您的 phone :

...
<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

Don't use specific CSS on smaller screens

html

css

iphone

smartphone

touchpad