Question

我正在尝试使用bootstrap创建一个响应式网页，但我对如何开始感到困惑。任何人都可以帮助我朝着正确的方向前进吗？

这是我的代码
https://jsfiddle.net/c30a7bd2/ {
{1}}

Answer 1

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

<强>过程：

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

了解媒体查询：

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

关于如何正确使用@media查询存在很多愚蠢的混淆。让我从头开始直接让你。

你只需要担心最小宽度。不要考虑范围，不要使用除最小宽度以外的任何其他东西。

这就是原因。

由于我们首先从最小设备宽度编写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越来越少。

玩得开心，写出优秀的代码！

创建响应式布局

1 个答案: