【问题标题】：Responsive website for desktop and mobile适用于桌面和移动设备的响应式网站
【发布时间】：2017-08-30 17:30:58
【问题描述】：

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

所以我需要创建一个名为“内容”的 div，该 div 居中，桌面宽度最大为 900 像素，移动设备占 100%。

我需要使用中等查询来处理两种尺寸的桌面：宽度为 900 像素或更大，移动设备的宽度小于 900 像素。（图片必须是响应式的。）

【问题讨论】：

标签： html css mobile responsive

【解决方案1】：

媒体查询类似于logical 语句。

如果

“如果”这些关于浏览器的事情都是真的，请使用里面的 CSS。

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

您可以阅读更多关于它的信息here。

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

在 W3Schools 的教程中，它将为您提供开始所需的信息，然后您就可以建立这些信息。希望这会有所帮助。

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

试试bootstrap 容器液。

或者，试试Foundation。希望这些框架对您有所帮助。

【讨论】：

【解决方案6】：

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

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

网页代码：

<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>

对于响应式图像使用：

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

希望对你有帮助。

【讨论】：