Web前端知识CSS（响应式设计）

1、什么是响应式设计

也叫响应式布局，响应式开发

实现不同屏幕分辨率的终端上浏览网页的不同展示方式。

响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局，从而在每种设备屏幕宽度下呈现的界面是不同的

响应式布局

原理：

一个网站适配所有终端，实现不同屏幕分辨率下的终端上网页的不同布局；
使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而达到适配不同屏幕的目的

简单的说：

响应式布局是元素随着屏幕发生宽高大小变化 + 盒子布局发生变化

自适应：元素随着屏幕发生宽高大小变化

优缺点

优点：

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       常用媒体查询尺寸：1200px1100px    1000px   1024px980px768px     720px640px480px375px320px280px

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>