原理：
-
一个网站适配所有终端，实现不同屏幕分辨率下的终端上网页的不同布局；
-
使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而达到适配不同屏幕的目的
简单的说：
响应式布局是元素随着屏幕发生宽高大小变化 + 盒子布局发生变化
自适应：元素随着屏幕发生宽高大小变化
优缺点
优点：
-
1、减少工作量，网站、设计、代码、内容都 只需要一份，多出来的工作量只是JS脚本、CSS样式做一些改变
-
2、节省设计、开发、维护成本【不再特定的维护PC页面，移动页面】
-
3、面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题
缺点：
-
1、兼容问题（IE8以下不支持）
-
2、需要加载更多的样式和脚本文件
-
3、代码累赘，会出现隐藏无用的元素，加载时间加长
-
4、页面设计比较难于精确定位和控制
-
5、影响用户体验(一定程度上改变了网站原有的布局结构，会出现用户混淆的情况,)
Bootstrap框架、苹果官网和星巴克官网使用的响应式布局
响应式网站演示：SegmentFault 思否
2、响应式需要的技术 ：
1.设置视口标签
2.使用媒体查询
3.响应字体
4.响应图片
5.采用百分比
1、媒体查询
1、标签设置
meta标签的设置
1.虚拟窗口：创建虚拟窗口，自定义窗口的大小和缩放功能，能适应移动设备的屏幕大小
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2.使用高版本的IE内核浏览器或者Chrome浏览器
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1"> http-equiv = "X-UA-Compatible": 这个是针对ie8以上浏览器的一个属性，ie8以下无法识别。就是说ie8以上浏览器遇到这个属性会执行content的描述，大小写不敏感。
2、使用媒体查询适配对应样式
可以根据设备显示器的特性，来设置不同的css的样式
2、媒体查询的引入方式和语法
1、媒体查询的语法
媒体查询的语法：
@media mediaType and (media feather) {
选择器 {
属性名：属性值
}
}
多个条件：
@media mediaType and (media feather) and (media feather){
选择器 {
属性名：属性值
}
}
mediaType：设备类型
media feather：媒体特性表表达式
1.mediaType设备类型：
all:所有的多媒体设备
print:打印机或打印预览
screen：电脑屏幕、平板电脑、智能手机等
speech：屏幕阅读器等发声设备
2.media feather:媒体特性表达式
width：浏览器的宽度
height:浏览器的高度
max-width：最大宽度
min-width:最小宽度
device-width:设备宽度
device-height:设备高度
max-device-width:最大设备宽度
min-device-width:最小设备宽度
orientation:设备的窗口朝向
1.横屏 宽度比高度大 orientation:landscape;
2.竖屏 高度比宽度大 orientation:portrait;
3.操作符
- and(与、和)
not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备)
only: 用来定某种特别的媒体类型。
/* 除了 speech 设备都可以用*/
@media not speech {
body {
background-color: tomato;
}
}
/* 只能在screen设备能用 */
@media only screen {
body {
background-color: yellowgreen;
}
}
-
媒体查询小案例--只在打印设备显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.txt {
font-size: 30px;
display: none;
}
/* 媒体查询 打印设备 在浏览器中鼠标右击，有打印两个字 点击就可以哦 */
@media print {
.txt {
display: block;
}
}
/* display: none; 隐藏元素
display: block; 显示元素
*/
</style>
</head>
<body>
<p class="txt">你看不见我，只能在打印设备才能看的见我哦</p>
</body>
</html>
2、媒体查询的引入方式
1.内部方式引入
<style>
body {
background-color: red;
}
/* 横屏 宽大于高 */
@media screen and (orientation: landscape) {
body {
background-color: yellow;
}
}
/* 竖屏 高大于宽 */
@media screen and (orientation: portrait) {
body {
background-color: pink;
}
}
</style>
2.外链式
在html的head标签的内部使用link标签引入外部的css文件（后缀名为.css的文件）
<head>
<link rel="stylesheet" href="./css/demo.css">
</head>
body {
background-color: pink;
}
/* 横屏 宽大于高 */
@media screen and (orientation: landscape) {
body {
background-color: tomato;
}
}
/* 竖屏 高大于宽 */
@media screen and (orientation: portrait) {
body {
background-color: yellowgreen;
}
}
<!-- 只有横屏时有样式 -->
<link rel="stylesheet" href="./css/demo.css" media="screen and (orientation: landscape)">
<!-- 只有竖屏时有样式 -->
<link rel="stylesheet" href="./css/demo.css" media="screen and (orientation: portrait)">
3、媒体查询常见的媒体尺寸设置
通过媒体查询，针对不同的设备的尺寸设置断点来改变布局
屏幕 设备 断点 超小屏幕 手机 <768px 小屏幕 平板 >=768px ~ <992px 中等屏幕 桌面 >=992px ~ <1200px 大屏幕 桌面 >=1200px 常用媒体查询尺寸： 1200px 1100px 1000px 1024px 980px 768px 720px 640px 480px 375px 320px 280px
4、移动设备优先
移动设备优先：超小屏幕 超小型设备（手机，768px以下）
小屏幕 768px-992px
@media screen and (min-width:768px) { ... } /* 小型设备（平板电脑，768px 以上） */
中等屏幕 992px - 1200px
@media screen and (min-width:992px){ ... }/* 中型设备（台式电脑，992px 以上） */
大屏幕 大于1200px
@media screen and (min-width:1200px){ ... }/* 大型设备（大台式电脑，1200px 以上） */
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*在移动端看 移动端显示的颜色 768px屏幕以下*/
body {
background-color: orange;
}
/* 小屏幕 768px-992px 屏幕宽度在768px以上显示的颜色*/
@media screen and (min-width: 768px) {
body {
background-color: yellow;
}
}
/* 中等屏幕 992px - 1200px*/
@media screen and (min-width: 992px) {
body {
background-color: tomato;
}
}
/* 大屏幕 大于1200px*/
@media screen and (min-width: 1200px) {
body {
background-color: pink;
}
}
</style>
</head>
<body>
</body>
</html>
5、大屏幕设备优先
大屏幕设备优先：大屏幕 桌面在1200px以上 大型设备（大台式电脑，1200px 以上）
中等屏幕 992px-1200px
@media screen and (max-width:1200px) { ... } /* 中型设备（台式电脑，1200px 以下） */
小屏幕 768px-992px
@media screen and (max-width:992px){ ... }/* 小型设备（平板电脑，992px 以下） */
超小屏幕 768px屏幕以下
@media screen and (max-width:768px){ ... }/* 超小型设备（手机，768px 以下） */
或者
@media screen and (max-width:768px){ ... }/* 超小型设备（手机，767px 以下） */
/* 注意：此时超小屏幕和小屏幕在768px之间有冲突，怎么解决？
把超小屏幕的区间降低1px*/
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 屏幕大于1200px显示的颜色 */
body {
background-color: green;
}
/* 中等屏幕 992px-1200px 屏幕宽度在1200px以下显示的颜色*/
@media screen and (max-width:1200px) {
body {
background-color: tomato;
}
}
/* 小屏幕 768px-992px*/
@media screen and (max-width:992px) {
body {
background-color: pink;
}
}
/* 注意：此时超小屏幕和小屏幕在768px之间有冲突，怎么解决？
把超小屏幕的区间降低1px*/
/* 超小屏幕 768px屏幕以下*/
@media screen and (max-width:767px) {
body {
background-color: orange;
}
}
</style>
</head>
<body>
</body>
</html>
6、响应式图片
1、内容图片响应
在html页面中的图片，比如文章里插入的图片我们都可以通过css样式使用百分比，来进行控制图片缩放：
#wrap img{
width:100%;
}
以上代码将图像强制占据其父元素空间的100%，当父元素宽度改变时图像元素也会相应改变，而高度默认为auto,图像自身宽高比例不会发生变化，宽高按照其宽高比进行放大
#wrap img{
max-width:100%;
}
以上代码将实现父元素宽度小于图像本身宽度时，图像跟随父元素改变，当父元素宽度大于图片时，图片宽度以自身本身宽度显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
vertical-align: middle;
}
.box1 {
border: 2px solid red;
margin-bottom: 10px;
}
/* 图片的大小会根据父元素宽度改变而改变，图片高度为auto,图像自身宽高比例不会发生变化,宽高按照其宽高比进行放大 */
.box1 img {
width: 100%;
}
.box2 {
border: 2px solid green;
text-align: center;
}
/* 以上代码将实现父元素宽度小于图像本身宽度时，图像跟随父元素改变，当父元素宽度大于图片时，图片宽度以自身本身宽度显示 */
.box2 img {
max-width: 100%;
}
</style>
</head>
<body>
<div class="box1">
<img src="../img/pic2.jpeg" alt="">
</div>
<div class="box2">
<img src="../img/pic2.jpeg" alt="">
</div>
</body>
</html>
2、背景图片处理
除了img标签的图片外我们经常会遇到背景图片，比如logo为背景图片：
.box1 {
width: 100%;
height: 300px;
border: 2px solid red;
background: url(../img/2.jpg) no-repeat;
box-sizing: border-box;
background-size: 100% 100%;
background-size: cover;
background-size: contain;
}
background-size属性值设置为百分比值或cover,contain等，将实现背景图片的大小跟随元素大小响应变化。
-
cover:覆盖，等比例缩放背景图片到铺满整个盒子，但是背景图可能会无法完整显示在盒子中（宽高给大点）
-
contain:包含，等比例缩放背景图片到完整显示在盒子中，有一边到达边界就停止放大, 可能导致另一边留白 但是背景图可能在区域范围内铺不满（宽高给大点）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100%;
height: 300px;
border: 2px solid red;
background: url(../img/2.jpg) no-repeat;
box-sizing: border-box;
background-size: 100% 100%;
background-size: cover;
background-size: contain;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
7、响应式文字
相对单位在文字的应用可以一定程度上提升效率精简代码
@media screen and (orientation:landscape) {
.box {
width: 300px;
height: 300px;
background-color: azure;
font-size: 24px;
}
.box h2 {
font-size: 48px;
}
.box p {
font-size: 36px;
}
}
改写后
@media screen and (orientation:landscape) {
.box {
width: 300px;
height: 300px;
background-color: plum;
font-size: 24px;
}
.box h2 {
/* font-size: 48px; */
font-size: 2em;
}
.box p {
/* font-size: 36px; */
font-size: 1.5em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* orientation:设备的窗口朝向
1.横屏 宽度比高度大 orientation:landscape;
2.竖屏 高度比宽度大 orientation:portrait; */
/* 媒体查询 */
@media screen and (orientation:landscape) {
.box {
width: 300px;
height: 300px;
background-color: azure;
font-size: 24px;
}
.box h2 {
font-size: 48px;
}
.box p {
font-size: 36px;
}
}
/* 媒体查询 响应式文字*/
@media screen and (orientation:landscape) {
.box {
width: 300px;
height: 300px;
background-color: plum;
font-size: 24px;
}
.box h2 {
/* font-size: 48px; */
font-size: 2em;
}
.box p {
/* font-size: 36px; */
font-size: 1.5eml;
}
}
</style>
</head>
<body>
<div class="box">
<h2>小U商城响应式</h2>
<p>响应式项目</p>
</div>
</body>
</html>
296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
