私は非常に初心者です。
media screen width = 1000pxの場合はdiv class yと表示したいと思います。
div xの場合はmedia screen width = 720pxと表示されます。htmlの部分を表示「反応する」
どうすればよいですか？ 「反応する」
<html>
<head>
</head>
<body>
<div class="x" ></div>
<div class="y" ></div>
</body>
</html>`
あなたが探しているのは、CSSメディアクエリです。これはあなたの投稿の要件の一例です。 divをデフォルトで非表示にします。ビューポートの幅が720pxの場合は.xを表示し、ビューポートが1000pxの場合は.yを表示します。
div {
display: none;
}
@media (width: 1000px) {
.y {
display: block;
}
}
@media (width: 720px) {
.x {
display: block;
}
}<html>
<head>
</head>
<body>
<div class="x" >x</div>
<div class="y" >y</div>
</body>
</html>.x {
background: red none repeat scroll 0 0;
height: 200px;
width: 200px;
}
.y
{width:200px;
height:200px;
background:black;}
@media (max-width:1000px) and (min-width:721px)
{
\t .x
\t {
\t \t display:none;
\t \t }
}
@media (max-width:720px) and (min-width:640px)
{
\t .y
\t {
\t \t display:none;
\t \t }
}<div class="x" ></div><div class="y" ></div>
<!--resize the browser size-->我々はメディアクエリを追加することで、Webページが応答することができます。スタイルシートで使用される一般的な構文は次のとおりです。 @media [条件] { スタイル }
1000px以上でのdiv yの作業を行うにはしてdiv要素のxを隠すために、あなたのスタイルで次のクエリを追加しますシート：
@media (min-device-width:1000px){
.y{display:block;}
.x{display:none;}
}
が750px以下でのdivのxを動作させるためにとのdiv yを非表示にするには、以下を使用します。これらの両方のステートメントでなければなりません
@media (max-device-width:750px){
.x{display:block;}
.y{display:none;}
}
をトンここではスタイルシートにあります。また本体タグの上にhtmlに <meta name="viewport" content="width=device-width,initial-scale=0">を追加する必要があります。
クエリを使用するモバイルデバイスのためのコードの一部を指定するためには、
@media only screen and (max-device-width:500px) and min-device-width:200px){
//The values used in pixels is just an example. It can vary..
}
は、あなたが何をした/してみてください、あなたがやろうとしているものを達成しようとしましたか？ –