CSS响应式设计——（视口/网格视图/媒体查询/图像/视频）看这一篇就够了
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
目录
响应式网页设计 - 简介
什么是响应式网页设计
响应式 web 设计会让我们的网页在所有设备上运行良好。
响应式 web 设计仅使用 HTML 和 CSS。
响应式 web 设计并不是程序或 JavaScript。
为所有用户获得最佳体验的设计
可以使用许多不同的设备来查看网页台式机、平板电脑和手机。无论使用哪种设备我们的网页都应该看起来美观且易用。
网页不应舍弃信息来适合较小的设备而应使其内容适合任何设备
桌面电脑
平板电脑
手机
如果我们使用 CSS 和 HTML 调整大小、隐藏、缩小、放大或移动内容以使其在任何屏幕上看起来都很好则称为响应式 Web 设计。
如果不理解下面的例子不要担心我们将在后面一步一步地分解代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For mobile phones: */
[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%;}
}
</style>
</head>
<body>
<div class="header">
<h1>Shanghai</h1>
</div>
<div class="row">
<div class="col-3 col-s-3 menu">
<ul>
<li>交通</li>
<li>文化</li>
<li>旅游</li>
<li>美食</li>
</ul>
</div>
<div class="col-6 col-s-9">
<h1>欢迎来到上海</h1>
<p>上海市简称沪别称申是中华人民共和国直辖市中国的经济、金融、贸易和航运中心世界著名的港口城市是中国人口第二多的城市。</p>
</div>
<div class="col-3 col-s-12">
<div class="aside">
<h2>历史</h2>
<p>最晚在新石器时代上海地区已经有先民聚居。春秋时代上海由吴国管辖战国时代则是楚国领土 ...</p>
<h2>位置</h2>
<p>上海位于中国东部弧形海岸线的正中间长江三角洲最东部东临东海南濒杭州湾西与江苏、浙江两省相接 ...</p>
<h2>环境</h2>
<p>上海地处江南水乡并位于长江入海口亦不处于主要地震带上因此如地震、洪水以及地质类灾害鲜有发生 ...</p>
</div>
</div>
</div>
<div class="footer">
<p>调整浏览器窗口的大小以查看内容如何响应调整大小。</p>
</div>
</body>
</html>
运行效果
响应式网页设计 - 视口
什么是视口
视口viewport是用户在网页上的可见区域。
视口随设备而异在移动电话上会比在计算机屏幕上更小。
在平板电脑和手机之前网页仅设计为用于计算机屏幕并且网页拥有静态设计和固定大小是很常见的。
然后当我们开始使用平板电脑和手机上网时固定大小的网页太大了无法适应视口。为了解决这个问题这些设备上的浏览器会按比例缩小整个网页以适合屏幕大小。
这并不是完美的勉强是一种快速的修正。
设置视口
HTML5 引入了一种方法使 Web 设计者可以通过 <meta> 标签来控制视口。
应该在所有网页中包含以下 <meta> 视口元素
<meta name="viewport" content="width=device-width, initial-scale=1.0">它为浏览器提供了关于如何控制页面尺寸和缩放比例的指令。
width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度视设备而定。
当浏览器首次加载页面时initial-scale=1.0 部分设置初始缩放级别。
把内容调整到视口的大小
用户习惯在台式机和移动设备上垂直滚动网站而不是水平滚动
因此如果迫使用户水平滚动或缩小以查看整个网页则会导致不佳的用户体验。
还需要遵循的一些附加规则
1. 请勿使用较大的固定宽度元素 - 例如如果图像的宽度大于视口的宽度则可能导致视口水平滚动。务必调整此内容以适合视口的宽度。
2. 不要让内容依赖于特定的视口宽度来呈现好的效果 - 由于以 CSS 像素计的屏幕尺寸和宽度在设备之间变化很大因此内容不应依赖于特定的视口宽度来呈现良好的效果。
3. 使用 CSS 媒体查询为小屏幕和大屏幕应用不同的样式 - 为页面元素设置较大的 CSS 绝对宽度将导致该元素对于较小设备上的视口太宽。而是应该考虑使用相对宽度值例如 width: 100%。另外要小心使用较大的绝对定位值这可能会导致元素滑落到小型设备的视口之外。
响应式网页设计 - 网格视图
什么是网格视图
许多网页都基于网格视图grid-view这意味着页面被分割为几列
在设计网页时使用网格视图非常有帮助。这样可以更轻松地在页面上放置元素。
响应式网格视图通常有 12 列总宽度为 100％并且在调整浏览器窗口大小时会收缩和伸展。
构建响应式网格视图
让我们开始构建响应式网格视图。
首先确保所有 HTML 元素的 box-sizing 属性设置为 border-box。这样可以确保元素的总宽度和高度中包括内边距填充和边框。
在 CSS 中添加如下代码
* {
box-sizing: border-box;
}可以在 CSS Box Sizing 一章中阅读有关 box-sizing 属性的更多内容。
下面的例子展示了一张简单的响应式网页其中包含两列
实例
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}若网页只包含两列则上面的例子还不错。
但是我们希望使用拥有 12 列的响应式网格视图来更好地控制网页。
首先我们必须计算一列的百分比100% / 12 列 = 8.33%。
然后我们为 12 列中的每一列创建一个类即 class="col-" 和一个数字该数字定义此节应跨越的列数
CSS:
.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%;}所有这些列应向左浮动并带有 15px 的内边距
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}每行都应被包围在 <div> 中。行内的列数总应总计为 12
HTML:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>行内的所有列全部都向左浮动因此会从页面流中移出并将放置其他元素就好像这些列不存在一样。为了防止这种情况我们会添加清除流的样式
CSS:
.row::after {
content: "";
clear: both;
display: table;
}我们还想添加一些样式和颜色使其看起来更美观
实例
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}注意当我们将浏览器窗口调整为非常小的宽度时例中的网页看起来并不理想。下面我们将学习如何解决这个问题。
响应式网页设计 - 媒体查询
什么是媒体查询
媒体查询是 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>
</div>典型的设备断点
高度和宽度不同的屏幕和设备不计其数因此很难为每个设备创建精确的断点。为了简单起见可以瞄准这五组
实例
/* 超小型设备电话600px 及以下 */
@media only screen and (max-width: 600px) {...}
/* 小型设备纵向平板电脑和大型手机600 像素及以上 */
@media only screen and (min-width: 600px) {...}
/* 中型设备横向平板电脑768 像素及以上 */
@media only screen and (min-width: 768px) {...}
/* 大型设备笔记本电脑/台式机992px 及以上 */
@media only screen and (min-width: 992px) {...}
/* 超大型设备大型笔记本电脑和台式机1200px 及以上 */
@media only screen and (min-width: 1200px) {...}方向人像 / 风景
媒体查询还可用于根据浏览器的方向来更改页面的布局。
可以设置一组 CSS 属性这些属性仅在浏览器窗口的宽度大于其高度时才适用即所谓的“横屏”方向
实例
如果方向为横向模式landscape mode则网页背景为浅蓝色
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}用媒体查询隐藏元素
媒体查询的另一种常见用法是在不同屏幕尺寸上对元素进行隐藏
实例
/* 如果屏幕尺寸为 600 像素或更小请隐藏该元素 */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}用媒体查询修改字体
还可以使用媒体查询来更改不同屏幕尺寸上的元素的字体大小
实例
/* 如果屏幕尺寸为 601px 或更大请将 <div> 的 font-size 设置为 80px */
@media only screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* 如果屏幕尺寸为 600px 或更小请将 <div> 的 font-size 设置为 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}CSS @media 参考手册
有关所有媒体类型和特性/表达式的完整概述在 CSS 参考手册中参阅 @media 规则。
响应式网页设计 - 图像
使用 width 属性
如果 width 属性设置为百分比且高度设置为 "auto"则图像将进行响应来放大或缩小
实例
img {
width: 100%;
height: auto;
}注意在上面的例子中图像可以放大到大于其原始大小。在多数情况下更好的解决方案是改为使用 max-width 属性。
使用 max-width 属性
如果将 max-width 属性设置为 100％则图像将按需缩小但绝不会放大到大于其原始大小
实例
img {
max-width: 100%;
height: auto;
}向实例网页添加图像
实例
img {
width: 100%;
height: auto;
}背景图像
背景图像也可以响应调整大小和缩放比例。
这是我们展示的三种不同方法
1. 如果将 background-size 属性设置为 "contain"则背景图像将缩放并尝试匹配内容区域。不过图像将保持其长宽比图像宽度与高度之间的比例关系
这是 CSS 代码
实例
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}2. 如果将 background-size 属性设置为 "100% 100%"则背景图像将拉伸以覆盖整个内容区域
这是 CSS 代码
实例
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}3. 如果 background-size 属性设置为 "cover"则背景图像将缩放以覆盖整个内容区域。注意"cover" 值保持长宽比且可能会裁剪背景图像的某部分
这是 CSS 代码
实例
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}为不同设备准备不同图像
大幅的图像在大型计算机屏幕上可以完美显示但在小型设备上就没用了。为什么在不得不缩小图像时又加载大图像呢为了减少负载或出于任何其他原因可以使用媒体查询在不同的设备上显示不同的图像。
大图像和一小图像会在不同的设备上显示
实例
/* 针对小于 400 像素的宽度 */
body {
background-image: url('img_smallflower.jpg');
}
/* 针对 400 像素或更大的宽度 */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}可以使用媒体查询 min-device-width 而不是 min-width 来检查设备宽度而不是浏览器宽度。然后当我们调整浏览器窗口的大小时图像将不会变化
实例
/* 针对小于 400 像素的设备 */
body {
background-image: url('img_smallflower.jpg');
}
/* 针对 400 像素及更大的设备 */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}HTML5 <picture> 元素
HTML5 引入了 <picture> 元素该元素使可以定义多幅图像。
浏览器支持
<picture> 元素的作用类似于 <video> 和 <audio> 元素。我们设置了不同的来源而匹配优先权的第一个来源是正在使用的来源
实例
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>srcset 属性是必需的它定义图像的来源。
media 属性是可选的它接受可在 CSS @media 规则 中找到的媒体查询。
提示还应该为不支持 <picture> 元素的浏览器定义 <img> 元素。
响应式网页设计 - 视频
使用 width 属性
如果 width 属性设置为100％则视频播放器将响应并放大和缩小
实例
video {
width: 100%;
height: auto;
}注意在上面的例子中视频播放器可以放大到大于其原始尺寸。在许多情况下更好的解决方案是改用 max-width 属性。
使用 max-width 属性
如果将 max-width 属性设置为 100％则视频播放器将按比例缩小但绝不会放大到大于其原始尺寸
实例
video {
max-width: 100%;
height: auto;
}在实例网页中添加视频
我们希望在实例网页中添加视频。视频将被调整大小以便始终占据所有可用空间
实例
video {
width: 100%;
height: auto;
}