如果

Question

我正在开始设计网页，但我仍然不太了解媒体查询。我很困惑这样做。是否有任何网页可以解释如何在CSS中使用此步骤，或者如果您可以帮助我，我将不胜感激。我需要针对桌面和移动设备做这个响应的网页。

所以我需要创建一个名为“content”的div，它以居中为中心，桌面宽度最大为900px，移动设备占100％。

我需要使用中等查询来处理两种尺寸的桌面：宽度为900px或更高，移动性低于900px。（图片必须有响应。）

Answer 1

媒体查询与logical语句类似。

如果

“如果”浏览器的这些内容都是正确的，请使用内部的CSS。

所以你可以拥有类似的东西，

您可以阅读更多相关信息here。

使用响应式网格时，您可以使用，

Answer 2

如果您对媒体查询不满意并且需要进行快速原型设计，我的建议是使用bootstrap。 Bootstrap将针对不同的设备进行相应的渲染。

您可以轻松插入引导程序文件并开始开发：请参阅有关如何使用bootstrap的链接以及示例：http://getbootstrap.com/docs/4.0/examples/

如果您想使用Css媒体查询，这将为您提供一步一步的实施：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 3

您可以浏览Youtube，因为有大量的教程可以展示如何开发响应式网站。您可以从查看此内容开始：W3Schools

在W3Schools的教程中，它将为您提供所需的信息，然后您构建。希望这会有所帮助。

Answer 4

根据设备使用网格系统，使用引导程序进行响应的最佳方法。

<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-
4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>

Answer 5

只需在youtube上观看来自thenewboston的所有视频！

Answer 6

尝试bootstrap容器液。

或者，试试Foundation。希望这些框架可以帮助您。

Answer 7

从响应开始的第一件事是在head标签中使用以下代码：

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

您网页的代码：

＆＃13;

<html>
<head>
<title>Web Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}
.content {
  width: 900px;
  margin: auto;
  background: red;
}

@media screen and (max-width:768px) {
  .wrapper {
    padding: 15px;
  }
  .content{
    width: auto;
  }
}
</style>
</head>
<body>
<div class="wrapper">
  <div class="content">
    ABC
  </div>
</div>
</body>
</html>

＆＃13;

对于响应式图像使用：

img {
    width: 100%;
    height: auto;
}

希望它有所帮助。

响应式桌面和移动网站

7 个答案:

如果