响应式设计断点

Question

I am trying to get away from bootstrap, and actually control my breakpoint myself. 我试图摆脱引导程序，并亲自控制断点。 Before I go on with learning, I would like to know if I am on the right track. 在继续学习之前，我想知道自己是否步入正轨。 So is it correct to do it like this: 所以这样做是正确的：

HTML: HTML：

<!DOCTYPE html>
<html>

<head>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div id="container">
        <img src="banner.png"/>
            <section id="left-column">
                <p>This is the left column</p>
            </section>
            <aside id="right-column">   
                <p>This is the right column</p>
            </aside>
    </div>
    <!-- /Container -->

</body>
</html>

CSS: CSS：

#container {
    width: 960px;
    margin: 0px auto;
}

#left-column {
    width: 700px;
    float: left;
    background-color: red;
}
#right-column {
    width: 260px;
    float: left;
    background-color: blue;
}

/* Tablet & Computer */
@media screen and (max-width:959px) {
    #container {
        width:100%;
    }
    #left-column {
        width: 70%;
    }
    #right-column {
        width: 30%;
    }
    img {
        width: 100%
    }
}   

/* Phone */
@media screen and (max-width:640px) {
    #left-column {
        width: 100%;
    }
    #right-column {
        width: 100%;
    }
}
/* Stop Scaling */
@media screen and (max-width:320px) {
    #container {
        width: 320px;
}

Answer 1

I don't think there's a good / bad way to use media queries, just the way you want it to :) 我不认为使用媒体查询有一种好/坏方法，只是您想要的方式:)

Bootstrap helps you with that by providing different breakpoint to apply to mobile/tablet/desktop and also different class names to help you with your layout style but you can do it from your own by using the breakpoints you want without Bootstrap. Bootstrap通过提供适用于移动设备/平板电脑/台式机的不同断点以及不同的类名来帮助您实现布局样式，从而为您提供了帮助，但是您可以通过使用自己想要的断点来实现此目的，而无需使用Bootstrap。 (See medias queries information about Bootstrap here : http://getbootstrap.com/css/#grid-media-queries ) （在此处查看有关Bootstrap的媒体查询信息： http : //getbootstrap.com/css/#grid-media-queries ）

So your way to do it is correct. 因此，您的做法是正确的。 Just close the last bracket here : 只需在这里关闭最后一个括号即可：

/* Stop Scaling */
@media screen and (max-width:320px) {
    #container {
        width: 320px;
    }
}

Also, I prefer to use fluid width (%) with mobile because it will takes the full width of the screen. 另外，我更喜欢在移动设备上使用流体宽度（％），因为它将占用屏幕的整个宽度。 In the case of your last media query, the width selected is quite useless (I don't know a lot of devices who go down 320px width) 对于您上一次的媒体查询，选择的宽度非常无用（我不知道很多设备的宽度下降了320px）

See here common devices used to help you select media queries : http://mydevice.io/devices/ 请参阅此处用于帮助您选择媒体查询的常用设备： http : //mydevice.io/devices/

Answer 2

You can get rid of Bootstrap but you can use their approach in break points 您可以摆脱Bootstrap，但可以在断点处使用他们的方法

which is 这是

Extra small devices Phones <768px 尺寸 <768px 超小型设备电话

Small devices Tablets ≥768px 小型设备平板电脑 ≥768px

Medium devices Desktops ≥992px 中型设备台式机 ≥992px

Large devices Desktops ≥1200px 大型设备台式机 ≥1200px

you need to specify grid systems for your columns instead of hard coded columns widths 您需要为列指定网格系统，而不是硬编码的列宽

like 喜欢

.col1{
  width:8.33333333%
}

.col2{
  width:16.66666667%
}

.col3{
  width:25%
}

.col4{
  width:33.33333333%
}

.col5{
  width:14.666667%
}

.col6{
  width:50%
}

.col7{
  width:58.33333333%
}

.col8{
  width:66.6666667%
}

.col9{
  width:75%
}

.col10{
  width:83.33333333%
}

.col11{
  width:91.6666666%
}
.col12{
  width:100%
}

Finally you have to define rows for your columns to avoid conflicts in height due to floating of the columns 最后，您必须为列定义行，以避免由于列的浮动而导致高度冲突

.row{
  margin-left:-15px;
  margin-right:-15px;
 }
.row{:after{
  content:'';
  display:block;
  clear:both
}
.col{   //general properties of columns
  padding:15px;
  float:left; 
}

Update: if you didn't clear the floats after row class via clear:both; 更新：如果您没有通过clear:both; row类之后的浮点数clear:both; you will find that the height of columns container is always 0 even if columns has contents this because the float subtract the height of the element from the height of the container 您会发现即使列包含内容，列容器的高度也始终为0，因为浮点数会从容器的高度中减去元素的高度

also you need to give it margin-left:-15px; 你也需要给它margin-left:-15px; and margin-right:-15px; 和margin-right:-15px; to keep the first and last columns of the row align with the content of the page 使行的第一列和最后一列与页面内容对齐

Answer 3

You can do it that way, but I would suggest using less or sass since it will otherwise be quite tedious (and you should definitely use autoprefixer too!). 您可以通过这种方式进行操作，但是我建议您使用较少或简单的方法，因为否则它将非常繁琐（而且您也绝对应该使用自动前缀！）。 Technically, you should probably style classes and not ids since it will be less disruptive. 从技术上讲，您可能应该设置类的样式而不是id的样式，因为这样会减少破坏性。 You might want to add a min-width, and you should probably verify that 70% + 30% can't ever be more than 100% due to rounding issues. 您可能要添加一个最小宽度，并且您可能应该验证由于舍入问题，70％+ 30％的总和不能超过100％。

Flexbox is the new/cool way of doing grids, see eg https://css-tricks.com/snippets/css/a-guide-to-flexbox/ , but that's just until we get proper grid layouts in css (eg https://css-tricks.com/snippets/css/complete-guide-grid/ ). Flexbox是制作网格的一种新的/很酷的方法，请参见例如https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ，但这只是直到我们在CSS中获得正确的网格布局（例如https ：//css-tricks.com/snippets/css/complete-guide-grid/ ）。

响应式设计断点

问题描述

3 个解决方案

解决方案1
2 已采纳 2016-04-16 15:36:50

解决方案2
1 2016-04-16 15:37:15

解决方案3
0 2016-04-16 15:32:56

响应式设计断点

问题描述

3 个解决方案

解决方案1 2 已采纳 2016-04-16 15:36:50

解决方案2 1 2016-04-16 15:37:15

解决方案3 0 2016-04-16 15:32:56

解决方案1
2 已采纳 2016-04-16 15:36:50

解决方案2
1 2016-04-16 15:37:15

解决方案3
0 2016-04-16 15:32:56