Question

我是初学者。
如果div class y，我想显示media screen width = 1000px 如果div x，则显示media screen width = 720px。

我该怎么办？ “响应”

<html>
  <head>
  </head>
  <body>
    <div class="x" ></div>
    <div class="y" ></div>
  </body>
</html>`

Answer 1

您正在寻找的是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>

Answer 2

＆＃13;

.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)
{
	.x
	{
		display:none;
		}
}
@media (max-width:720px) and (min-width:640px)
{
	.y
	{
		display:none;
		}
}

＆＃13;

<div class="x" ></div><div class="y" ></div>
<!--resize the browser size-->

＆＃13;

Answer 3

我们可以通过添加媒体查询来响应网页。样式表上使用的一般语法是： @media [conditions] { 款式 }

要使div工作在1000px或更高并隐藏div x，请在样式表中添加以下查询：

@media (min-device-width:1000px){
   .y{display:block;}
   .x{display:none;}
}

要使div x工作在750px或更低并隐藏div y，请使用以下内容：

@media (max-device-width:750px){
   .x{display:block;}
   .y{display:none;}
}

这些陈述必须在样式表中。也，必须将<meta name="viewport" content="width=device-width,initial-scale=0">添加到 body 标记上方的html中。

要为移动设备指定一段代码，请使用查询

@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..
    }

显示部分HTML“响应”

3 个答案: