0

我有一些 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;
    }
 }
4

2 回答 2

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>
...
于 2016-04-17T17:08:10.513 回答
1

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

该@media属性的语法是

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

所以你必须使用这段代码来达到预期的效果：

@media (max-width: 667px){
    .content {
      margin-left: 1em;
      margin-right: 1em;
    }
}
于 2016-04-17T17:22:22.747 回答