响应式设计

脆皮煎蛋

已于 2022-10-05 16:14:00 修改

阅读量71

点赞数

文章标签：前端 javascript css

于 2022-10-05 16:11:07 首次发布

本文链接：https://blog.csdn.net/m0_73304951/article/details/127173507

版权

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;
}
}

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、移动设备优先

<!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、大屏幕设备优先

<!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>