0

我试图摆脱引导程序，并实际控制我自己的断点。在我继续学习之前，我想知道我是否走在正确的轨道上。那么这样做是否正确：

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：

#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;
}
4

3 回答 3

2

我认为使用媒体查询没有好/坏的方式，只是你想要的方式:)

Bootstrap 通过提供不同的断点以应用于移动/平板电脑/桌面以及不同的类名来帮助您实现布局样式，但您可以通过使用不使用 Bootstrap 的断点来自己完成。（在此处查看有关 Bootstrap 的媒体查询信息：http: //getbootstrap.com/css/#grid-media-queries）

所以你的做法是正确的。只需在这里关闭最后一个括号：

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

此外，我更喜欢在移动设备上使用流体宽度 (%)，因为它会占据屏幕的整个宽度。在您上次媒体查询的情况下，选择的宽度是非常无用的（我不知道很多设备会降低 320px 宽度）

请参阅此处用于帮助您选择媒体查询的常用设备：http: //mydevice.io/devices/

于 2016-04-16T15:36:50.150 回答
1

您可以摆脱 Bootstrap 但您可以在断点中使用他们的方法

这是

超小型设备 电话 <768px

小型设备 平板电脑 ≥768px

中型设备 台式机 ≥992px

大型设备 台式机 ≥1200px

您需要为列指定网格系统而不是硬编码的列宽度

像

.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%
}

最后，您必须为列定义行以避免由于列的浮动而导致的高度冲突

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

更新：如果您没有在row课后清除浮动，clear:both;您会发现即使列有内容，列容器的高度也始终为 0，因为浮动从容器的高度中减去元素的高度

您还需要提供它margin-left:-15px;并margin-right:-15px;保持该行的第一列和最后一列与页面的内容对齐

于 2016-04-16T15:37:15.310 回答
0

你可以这样做，但我建议使用 less 或 sass，否则会很乏味（你也应该使用 autoprefixer！）。从技术上讲，您可能应该设置类而不是 id，因为它的破坏性较小。您可能想要添加一个最小宽度，并且您可能应该验证 70% + 30% 由于舍入问题不能超过 100%。

Flexbox 是制作网格的新的/很酷的方式，参见例如https://css-tricks.com/snippets/css/a-guide-to-flexbox/，但这只是直到我们在 css 中获得正确的网格布局（例如https ://css-tricks.com/snippets/css/complete-guide-grid/）。

于 2016-04-16T15:32:56.477 回答