创建响应式布局[关闭]答案

【问题标题】：Creating a Responsive Layout [closed]创建响应式布局[关闭]
【发布时间】：2017-05-16 08:07:09
【问题描述】：

我正在尝试使用引导程序创建一个响应式网页，但我对如何开始感到困惑。谁能帮助我朝着正确的方向前进？

这是我的代码
https://jsfiddle.net/c30a7bd2/
It should be responsive for all the devices.

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定问题或错误和在问题本身中重现它所需的最短代码。没有明确的问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example。
使用媒体查询或搜索引导，Stack Overflow 团队是为了帮助和指导，而不是为了完成你的任务或工作。
从getbootstrap.com/getting-started/#examples 选择一些无引导的布局，然后根据您的网站开始修改此布局。

标签： html css twitter-bootstrap-3

【解决方案1】：

尽管投了反对票，但这里有一些信息可以帮助您入门。

流程：

从最小的视口到最大的设计。即首先为纵向移动设备设计响应式网站，然后是横向移动设备，然后是平板纵向，然后是平板横向，然后是最小的桌面，然后是最大的桌面。如果您查看 Chrome 开发工具，您会在左上角的箭头图标右侧看到一个图标。这会使浏览器进入列出最常见设备的响应式设计模式。很有帮助。

了解媒体查询：

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

关于如何正确使用@media 查询有很多愚蠢的困惑。让我从一开始就让你明白。

您只需要担心最小宽度。不要考虑范围，不要使用除 min-width 之外的任何东西。

这就是原因。

由于我们首先从最小设备宽度开始编写 CSS，随着浏览器宽度的增加，我们所做的就是覆盖早期设置的样式。而已。这就是编写出色、简单的响应式 CSS 编码的秘诀。

使用哪些断点：

同样，许多聪明的工程师都试图变得过于聪明。他们引入了奇怪的断点，尽量避免像素'px'定义等。停止这样做。

请记住，由于我们首先编写代码移动肖像（最小的设备尺寸），因此没有媒体查询。它只是 CSS。

以下是您应该从以下断点开始：

/* all mobile portrait coding goes first */

@media all and (min-width: 480px) {
  /* this is the most common mobile landscape minimum width */
}

@media all and (min-width: 768px) {
  /* this is the most common minimum tablet width */
}

@media all and (min-width: 1024px) {
  /* this is the most common minimum desktop width. It also is the 
     most common minimum tablet landscape width. */
}

@media all and (min-width: 1300px) {
  /* this is the most common minimum wide desktop width. 
     This is the only media query you might consider setting to 1200px
     if your graphic design requires it. */
}

就是这样。从字面上看，这就是您开始编写出色的响应式 CSS 所需的一切。

请记住，关键概念是利用继承。你的 80% 的 CSS 可能应该首先针对移动肖像尺寸编写。所有这些样式都被继承到越来越宽的屏幕宽度中。然后根据需要为新的更宽屏幕覆盖它们。你会发现随着媒体查询的增加，其中的 css 越来越少。

玩得开心，写出精彩的代码！

【讨论】：