响应式设计介绍
所谓 适配 ，就是指移动端的网页在不同的设备下看上去都是正常的；
所谓 响应式，是指一套代码能够在不同的设备下有着不一样的表现；响应式设计依托于 CSS3 中的媒体查询，通过查询当前设备的一个尺寸信息，然后应用不同的样式；
-
响应式设计的缺点如下：
- 代码冗余，有一些东西是特定 PC 端有，有一些东西是特定手机端有，但是因为是一套代码，因此无论是 PC 端还是手机平板端，这些代码都会有；
- 移动端和 PC 端还是有一定的差异性，比如移动端可以两根手指放大页面，而这个在 PC 端是没有的，随着移动端的代码和 PC 端差异越大，使用一套代码就会越感到力不从心；
-
响应式设计在今天看来是有一点没落了，特别是对于互联网公司，宁愿 PC 和移动端不同的代码分开，然后移动端再去解决适配的问题即可；但是对于一些产品型的公司（例如星巴克），因为网站只是用于展示公司的产品为主，所以仍然还在使用响应式设计；
媒体查询介绍
-
学习媒体查询主要包含以下的内容：
- 媒体类型
- 媒体特性
- 逻辑运算符
-
使用媒体查询时，需要注意以下几点：
- 网页宽度自动调整
- 尽量少使用绝对宽度
- 字体的大小使用相对单位（rem、em）
- 布局尽量使用流式布局
媒体类型
-
媒体类型，有具体如下的类型：
- all：所有设备
- print：打印机设备
- screen：彩色的电脑屏幕
- speech：听觉设备（针对有视力障碍的人士，可以把页面的内容以语音的方式呈现的设备）
注意：tty、tv、projection、handheld、braille、embossed、aural 等几种类型在媒体查询 4 中已经废弃
-
简单的示例：
htmlcss<div></div>div{ width: 200px; height: 200px; background: green; } /* 在所有设备中生效 */ @media all{ div{ width: 300px; height: 300px; background: red; } } /* 在打印机设备中生效 */ @media print{ div{ width: 300px; height: 300px; background: blue; } } /* 在彩色电脑屏幕中生效 */ @media screen{ div{ width: 400px; height: 400px; background: pink; } }
媒体特性
-
所谓媒体特性，就是指在确定了设备的情况下，具体再根据细分条件进行分类。
-
常见的媒体特性有：
- width：宽度
- min-width：最小宽度，宽度只能比这个值大
- height：高度
- max-width：最大宽度，宽度只能比这个值小
- orientation：方向
- landscape：宽度大于高度（横屏）
- portrait：高度大于宽度（竖屏）
- aspect-ratio：宽高比
- -webkit-device-pixel-ratio：像素比（webkit 内核私有的属性）
-
简单示例：
htmlcss<div></div>/* 屏幕的尺寸在400-500之间条件满足 */ div{ width: 100px; height: 100px; background: red; } /* 屏幕尺寸大于500的时候条件满足 */ @media (min-width:500px){ div{ background: green; } } /* 屏幕尺寸小于400的时候条件满足 */ @media (max-width:400px){ div{ background: blue; } } @media (orientation:landscape){ div{ width: 400px; height: 100px; } } @media (orientation:portrait){ div{ width: 100px; height: 400px; } } /* 800*600的时候宽高比为4:3 */ @media (aspect-ratio:4/3){ div{ border: 10px solid #000; } } /* 屏幕的像素比为2的时候条件满足 */ @media (-webkit-device-pixel-ratio:2){ div::after{ content: '媒体查询'; font-size: 50px; } }
逻辑运算符
-
在媒体查询中，支持逻辑运算符，具体有：
- and：合并多个媒体类型（并且的意思）
- , 号：匹配某个媒体查询（或者的意思）
- not：对媒体查询结果取反
- only：仅在媒体查询匹配成功后应用样式（防范老旧浏览器）
-
逻辑运算符的示例：
htmlcss<div></div>div{ width: 200px; height: 200px; background: red; } /* 所有设备、宽度必需大于700px、横屏，这三个条件同时满足才为true */ @media (min-width:700px) and (orientation:landscape){ div{ background: green; } } /* 屏幕尺寸要小于800px, 横屏，这两个只要有一个满足，整个条件就会满足*/ @media (max-width:800px),(orientation:landscape){ div{ background: pink; } } /* 屏幕的尺寸大于800，这个条件才能成立 */ @media not all and (max-width:800px){ div{ background: blue; } } /* 彩色的屏幕，宽度大于1000px，这两个条件同时满足，整体条件才满足 */ @media only screen and (min-width:1000px){ div{ background: grey; } }
外部引入媒体查询样式
在样式里使用
@media all{
div{
width: 100px;
}
}
在 link 标签里使用
<link rel="stylesheet" href="1.css" media='all'>
在 import 里使用
-
200.css
div{ width: 100%; } -
400.css
div{ width: 50%; } -
600.css
div{ width: 33.3%; } -
800.css
div{ width: 25%; } -
1000.css
div{ width: 20%; } -
之后在 HTML 文件中，如果是按照第二种引入方式，则是：
<link rel="stylesheet" href="css/200.css" media="all and (min-width:200px)"> <link rel="stylesheet" href="css/400.css" media="(min-width:400px)"> <link rel="stylesheet" href="css/600.css" media="(min-width:600px)"> <link rel="stylesheet" href="css/800.css" media="(min-width:800px)"> <link rel="stylesheet" href="css/1000.css" media="(min-width:1000px)"> -
如果是按照第三种引入方式，则是：
@import url('css/200.css') (min-width:200px); @import url('css/400.css') (min-width:400px); @import url('css/600.css') (min-width:600px); @import url('css/800.css') (min-width:800px); @import url('css/1000.css') (min-width:1000px);
实战案例
示例一
html
css
<div></div>
div {
padding: 50px 0;
border: 1px solid #000800;
}
div::after {
content: '这是一个房子'
}
@media all and (max-width:1000px) {
div {
background: #1177bb;
}
div::after {
content: "哇，房子好大哦，可以放下炕了！";
}
}
@media (max-width:800px) {
div {
background: #aeaeae;
}
div::after {
content: "喔，房子变小了，只能放一张双人床";
}
}
@media (max-width:500px) {
div {
background: #46ae46;
}
div::after {
content: "哎，房子更小了，只能放一张单人床"
}
}
@media (max-width:300px) {
div {
background: #ff8cff;
}
div::after {
content: "咦！房子也忒小了吧，床都放不下！";
}
}
示例二
html
css
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
body {
margin: 0;
}
div {
width: 100px;
height: 100px;
background: green;
float: left;
border: 1px solid #000;
box-sizing: border-box;
}
/* 200-400 */
@media (min-width:200px) {
div {
width: 100%;
}
}
/* 400-600 */
@media (min-width:400px) {
div {
width: 50%;
}
}
/* 600-800 */
@media (min-width:600px) {
div {
width: 33.3%;
}
}
/* 800-1000 */
@media (min-width:800px) {
div {
width: 25%;
}
}
/* 1000以上 */
@media (min-width:1000px) {
div {
width: 20%;
}
}
响应式开发实战案例
打赏作者
您的打赏是我前进的动力
微信
支付宝
📱 移动端适配
上一篇
评论
