0

サイトのコンテンツ全体の左右に 5em のマージンを持たせる CSS があります。

.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 に答える