小さな画面で特定のCSSを使用しない

私は、サイトコンテンツ全体を5emで左右にマージンを持たせるCSSをいくつか持っています。小さな画面で特定の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; 
    } 
}

出典

2016-04-17 Max

：

@mediaプロパティの構文は

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

だから、あなたが希望する結果を達成するために、このコードを使用する必要があります画面が指定された幅より小さい場合、余白 –

あなたはそれを達成するために指定widthでメディアクエリを使用することができます。http://mydevice.io/devices/

はまた、忘れてはいけない：

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

は、あなたがしたい幅を選択するために、ここで一般的なデバイス幅を参照してください。電話機で使用できるように、<head></head>タグにビューポートメタを含めるには：

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

出典

2016-04-17 17:08:10

これは何の違いもなく、私はiPhone 6を使用しています。また、最大幅を1000pxにしてみました。 – Max

メタビューポートをタグに入れましたか？ –

はい私はそれを使用しましたが、あなたの最初の提案は何らかの理由で初めて動作しませんでしたが、今は動作します。ありがとう！ – Max

メディアクエリに使用する構文が正しくありません。メディアクエリーがトリガーする幅、つまり、メディア内のコードがデフォルトコードを上書きするコードの画面上の幅を指定する必要があります。そう、あなたが持っている.content` `たくない

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

出典

2016-04-17 17:22:22 Rasik

小さな画面で特定のCSSを使用しない

答えて

関連する問題