html5响应式媒体查询,响应式网页设计 - 媒体查询

另一个断点

您可以添加任意多个断点。

我们还会在平板电脑和手机之间插入一个断点。

桌面电脑

平板电脑

手机

为此，我们添加了一个媒体查询(在 600 像素)，并为大于 600 像素(但小于 768 像素)的设备添加了一组新类：

实例

请注意，两组类几乎相同，唯一的区别是名称(col- 和 col-s-)：

/* 针对手机： */

[class*="col-"] {

width: 100%;

}

@media only screen and (min-width: 600px) {

/* 针对平板电脑： */

.col-s-1 {width: 8.33%;}

.col-s-2 {width: 16.66%;}

.col-s-3 {width: 25%;}

.col-s-4 {width: 33.33%;}

.col-s-5 {width: 41.66%;}

.col-s-6 {width: 50%;}

.col-s-7 {width: 58.33%;}

.col-s-8 {width: 66.66%;}

.col-s-9 {width: 75%;}

.col-s-10 {width: 83.33%;}

.col-s-11 {width: 91.66%;}

.col-s-12 {width: 100%;}

}

@media only screen and (min-width: 768px) {

/* 针对桌面： */

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

}

有两组相同的类似乎很奇怪，但是它给了我们机会用 HTML 来决定在每个断点处的列会发生什么：

HTML 实例

对于台式机：

第一和第三部分都会跨越 3 列。中间部分将跨越 6 列。

对于平板电脑：

第一部分将跨越 3 列，第二部分将跨越 9 列，第三部分将显示在前两部分的下方，并将跨越 12 列：

...

...

...