Question

我之前的帖子谈到了为什么他们的媒体查询不起作用，但似乎它们与我的问题无关。所以我来这里寻求帮助。

大家好，

超级新手在这里，我已经被这个问题困扰了一个多星期了，我希望我能在这里得到一些帮助......这是我的代码。我不知道提出问题的正确方法，所以如果有任何改进的地方，请告诉我。

代码的要点是制作一个响应浏览器宽度不同的布局。

/ * HTML * /

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>

<h1>HEADER YES PRAISE THE lORD</h1>

<div class="div-1">

\<h2\>Chicken\</h2\>

\<p\>The chicken is a type of domesticated fowl, a subspecies of the red junglefowl. It is one of the most common and widespread domestic animals, with a total population of more than 19 billion as of 2011.\</p\>
</div>

<div class="div-2">

\<h2 style="background\-color:blue;"\>Beef\</h2\>

\<p\>Beef is the culinary name for meat from cattle, particularly skeletal muscle. Humans have been eating beef since prehistoric times. Beef is a source of high\-quality protein and essential nutrients.\</p\>
</div>

<div class="div-3">

\<h2 style="background\-color:lime;"\>Sushi\</h2\>

\<p\>Sushi is a Japanese dish of specially prepared vinegared rice, usually with some sugar and salt, combined with a variety of ingredients, such as seafood, vegetables, and occasionally tropical fruits\</p\>
</div>

</body>

</html>

/ * CSS * /

{

box\-sizing: content\-box;
}

h1{

text\-align: center;
}

p{

clear:both;

padding: 10px;
}

div h2{

background\-color: red;

float: right;

border\-left: 2px solid black;

border\-bottom: 2px solid black;

text\-align: center;

padding:10px;

margin:0px;

width:100px;
}

.div-1{

box\-sizing: content\-box;

border:2px solid black;

color:white;

background\-color:grey;

margin:10px;

float:left;

}
.div-2{

box\-sizing: content\-box;

border:2px solid black;

color:white;

background\-color:grey;

margin:10px;

float:left;

}
.div-3{

box\-sizing: content\-box;

border:2px solid black;

color:white;

background\-color:grey;

margin:10px;

float:left;

}
@media(min-width: 992px;){

.div-1{

width:33&#37;;
}

.div-2{

width:33&#37;;
}

.div-3{

width:33&#37;;
}

}

@media(min-width: 768px)and(max-width:991px){

.div-1{

width:50&#37;;
}

.div-2{

width:50&#37;;
}

.div-3{

width:100&#37;;
}

}

@media(max-width: 767px){

.div-1{

width:100&#37;;
}

.div-2{

width:100&#37;;
}

.div-3{

width:100&#37;;
}

}

Answer 1

@media screen and (min-width: 800px){
    //your code here
}

使用像

这样的东西是好的

<div class="box first/1"></div>
<div class="box second/2"></div>

insted of

<div class="div-1"></div>
<div class="div-2"></div>

避免重复你的css

Answer 2

两件事：在元内容标记中添加initial-scale=1.0。

指定媒体类型，在这种情况下它是屏幕。

@media screen and (min-width: 992px;){

.div-1{

width:33&#37;;
}

我的@media不起作用

2 个答案: