创建响应式布局

Question

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

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

Answer 1

尽管downvotes，这里的一些信息，让你开始。

过程：

设计从最小的视口最大。即先为移动设备设计纵向，移动横幅，平板电脑纵览，平板电脑横向，然后是最小的桌面，然后是最大的桌面。如果您查看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所知道的一切。

只记得关键概念是利用继承。你的CSS的80％应该首先写入移动肖像大小。所有这些样式都会继承到更宽和更宽的屏幕宽度。然后根据需要为新的更宽屏幕覆盖它们。你会发现，随着媒体查询的增加，它们中的css越来越少。

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