网站建设(黑龙江省大兴安岭网站建设服务中心) - 上往建站

网站建设(黑龙江省大兴安岭网站建设服务中心) - 上往建站

什么是媒体查询？

媒体查询是 CSS3 中引入的一种 CSS 技术。

仅在满足特定条件时，它才会使用 @media 规则来引用 CSS 属性块。

实例

如果浏览器窗口是 600px 或更小，则背景颜色为浅蓝色：

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

  body {

    background-color: lightblue;

  }

}

亲自试一试

添加断点

在本教程中稍早前，我们制作了一张包含行和列的网页，但是这张响应式网页在小屏幕上看起来效果并不好。

媒体查询可以帮助您。我们可以添加一个断点，其中设计的某些部分在断点的每一侧会表现得有所不同。

桌面电脑

手机

使用媒体查询在 768px 处添加断点：

实例

当屏幕（浏览器窗口）小于 768px 时，每列的宽度应为 100％：

/* 针对桌面设备： */

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

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

  /* 针对手机： */

  [class*="col-"] {

    width: 100%;

  }

}

亲自试一试

始终移动优先设计

移动优先（Mobile First）指的是在对台式机或任何其他设备进行设计之前，优先针对移动设备进行设计（这将使页面在较小的设备上显示得更快）。

这意味着我们必须在 CSS 中做一些改进。

当宽度小于 768px 时，我们应该修改设计，而不是更改宽度。我们就这样进行了“移动优先”的设计：

实例

/* 针对手机： */

[class*="col-"] {

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

}

亲自试一试

另一个断点

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

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

桌面电脑

平板电脑

手机

为此，我们添加了一个媒体查询（在 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 列：

<div class="row">

  <div class="col-3 col-s-3">...</div>

  <div class="col-6 col-s-9">...</div>

  <div class="col-3 col-s-12">...</div>

网站建设(黑龙江省大兴安岭网站建设服务中心) - 上往建站