2017-12-02 9 views
-2

私はインターネット上で答えを探してみましたが、うまくいきませんでした。垂直になっているときにli要素が画面上で小さくなるモバイルに応答するようにしたいと考えています。これは私のコードですが、スタイルシートへのリンクを入れて見出しセクションにメタ・ビューポート部分を配置しました。ここでサイトをモバイルレスポンスにするにはどうすればよいですか?

@media only screen and (max-width: 400px) { 
.list { 
    width: 30px; height: 20px; 
} 

} 
+1

コードは正常に動作します。覗いてみてください(ウィンドウを縮小すると、赤い背景がフルで30ピクセル幅になります):https://jsfiddle.net/0tz6udt0/ – ceejayoz

答えて

0

いくつかの共通の標準的なポイントです:正直に言うと

@media (min-width: 320px) { /* for iPhones and smartphones */ } 
@media (min-width: 481px) { /* for larger phones and small tablets */ } 
@media (min-width: 600px) { /* for tablets */ } 

@media (min-size: iPhone)または@media (min-size: windows_tablet)のようなものがあった場合、それは本当に参考になります。それはずっと簡単になります。

+0

どこに貼り付けますか? @mediaのみの画面と(max-width:400px)の代わりに? – lldrem22

+0

[ceejayoz](https://stackoverflow.com/users/1902010/ceejayoz)のように、コードは完璧に機能します。編集したい要素を '@media'ブロック内に置きます。例: '@media(min-size:400px){.list { width:50px; }} 'は動作します。 – MattGotJava

+0

いくつかのチュートリアルでは、セクションの@mediaと具体的にリンクしていることが分かりましたが、そうする必要がありますか? – lldrem22

関連する問題