响应式 Web 设计 - 媒体查询-开发文档-JsSaaS开发平台

系统、网站、API站点，简单高效开发

CSS 教程

CSS 教程 CSS 简介 CSS 语法 CSS Id 和 Class CSS 创建 CSS 背景 CSS 文本格式文本格式 CSS 字体 CSS 链接 CSS 列表 CSS 表格 CSS 盒子模型 CSS 边框 CSS 轮廓（outline） CSS margin(外边距) CSS padding（填充） CSS 分组和嵌套选择器 CSS 尺寸 (Dimension) CSS Display(显示) 与 Visibility（可见性） CSS Position(定位) CSS 布局 - Overflow CSS Float(浮动) CSS 布局 - 水平 & 垂直对齐 CSS 伪类(Pseudo-classes) CSS 伪元素 CSS 导航栏 CSS 图片廊 CSS 图像透明/不透明 CSS 图像拼合技术 CSS 媒体类型 CSS 属性选择器 CSS 表单 CSS 计数器 CSS 网页布局 CSS !important 规则你已经学习了CSS,下一步学习什么呢? CSS 实例

CSS3 教程

CSS3 教程 CSS3 简介 CSS3 边框 CSS3 背景 CSS3 渐变（Gradients） CSS3 文本效果 CSS3 字体 CSS3 2D 转换 CSS3 3D 转换 CSS3 过渡 CSS3 动画 CSS3 多列 CSS3 用户界面 CSS 图片 CSS 按钮 CSS 分页实例 CSS3 框大小 CSS3 多媒体查询 CSS3 多媒体查询实例

CSS 响应式设计

响应式 Web 设计 - Viewport 响应式 Web 设计 - 网格视图响应式 Web 设计 - 媒体查询响应式 Web 设计 - 图片响应式 Web 设计 - 视频(Video) 响应式 Web 设计 - 框架

CSS 参考手册

CSS 参考手册 CSS 选择器 CSS 听觉参考手册 CSS Web安全字体组合 CSS 动画 CSS 单位 CSS 颜色 CSS 合法颜色值 CSS 颜色名称 CSS 颜色十六进制值

响应式 Web 设计 - 媒体查询

媒体(media)查询在 CSS3 上有介绍：CSS3 @media 查询。

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

实例

如果浏览器窗口小于 500px, 背景将变为浅蓝色：

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

添加断点

在先前的教程中我们使用行和列来制作网页，它是响应式的，但在小屏幕上并不能友好的展示。

媒体查询可以帮我们解决这个问题。我们可以在设计稿的中间添加断点，不同的断点有不同的效果。

桌面设备

手机设备

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

实例

当屏幕 (浏览器窗口) 小于 768px, 每一列的宽度是 100%:

/* For desktop: */
.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) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}

为移动端优先设计

移动端优先意味着在设计桌面和其他设备时优先考虑移动端的设计。

这就意味着我们必须对 CSS 做一些改变。

我们在屏幕小于 768px 进行样式修改，同样在屏幕宽度大于 768px 时也需要修改样式。以下是移动端优先实例：

/* 为移动端设计: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .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%;}
}

其他断点

你可以根据自己的需要添加断点。

我们同样可以为平板设备和移动手机设备设置断点。

桌面设备

平板设备

手机设备

在屏幕为 600px 时添加媒体查询，并设置新的样式（屏幕大于600px但小于768px）：

实例

注意两组类样式是相同的，但名称不同 (col- 和 col-m-):

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .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 实例

针对桌面设备:

第一和第三部分跨越 3 列。中间部分跨域 6 列。

针对平板设备:

第一跨域 3列，第二部分跨越 9 列，第三部分跨域 12 列：

方向：横屏/竖屏

结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

语法：

orientation：portrait | landscape

portrait：指定输出设备中的页面可见区域高度大于或等于宽度
landscape： 除portrait值情况外，都是landscape

实例

如果是横屏背景将是浅蓝色：

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}