首先，什么是响应布局？

响应设计：响应设计是为了解决移动互联网浏览器而诞生的网站，而不是所有终端都能正常显示的代码集为每个终端创建特定版本。

二、响应式设计步骤

2.1、viewport 设置

大多数移动端浏览器都将html页面的宽度作为可视区的视图以符合屏幕分辨率，所以我们需要利用 meta 设置 viewport ，将网页宽度设为设备宽度。

在head中添加meta标签，设置设备的宽度作为视图大小，禁止缩放。代码如下：

<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>

2.2、媒体查询

媒体查询：Media Queries，是响应式布局的核心，浏览器会根据条件选择需要渲染的html和css内容。多种屏幕设备的宽度主要分为四个区间。

超小屏幕
手机 (<768px)

小屏幕
平板 (≥768px)

中等屏幕
桌面显示器 (≥992px)

大屏幕
大桌面显示器 (≥1200px)

媒体查询有两种引入方式：内部引入和外部引入。

2.2.1、内部引入

/* 手机端样式 */
@media screen and (max-width:768){}

/* ipad终端样式 */
@media screen and (min-width:768px) and ( max-width:992px ){}

/*笔记本样式*/
@media screen and (min-width:992px) and (max-width:1200px){}

/* 台式机大屏 */
@media screen and (min-width:1200px){}

2.2.2、外部引入

/* 手机端样式 */
<link rel="stylesheet" media="screen and (max-width:768px)" />

/* ipad终端样式 */
<link rel="stylesheet" media="screen and (min-width:768px) and ( max-width:992px )" />

/*笔记本样式*/
<link rel="stylesheet" media="screen and (min-width:992px) and (max-width:1200px)" />

/* 台式机大屏 */
<link rel="stylesheet" media="screen and (min-width:1200px)" />

注意：

  • 使用媒体查询的时候，要把公共样式放到最前边，媒体查询代码放到最后。
  • 写媒体查询的时候要按照屏幕从小到大的设置。
  • 外层包裹的元素宽度处理要使用百分比。
  • 图片缩放处理的时候容易失真，所以尝试给图片添加最大最小的宽度。

三、响应式布局实例

eg：制作一个展示图片的列表，大屏展示一行4张图片，ipad一行展示3张图片，手机一行展示两张图片。

<!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>
.list{
width:100%;
max-width:1200px;
padding:0;
margin:0 auto;
}
.pic{
float:left;
list-style:none;
box-sizing: border-box;
padding:10px;
margin:15px 0px;
}
.picture{
width:100%;
height:100px;
background:#eaeaea;
}
@media screen and (max-width:768px) {
.pic{
width:50%;
}
}
@media screen and (min-width:768px) and (max-width:992px) {
.pic{
width:33%;
}
}
@media screen and (min-width:992px) {
.pic{
width:25%;
}
}
</style>
</head>
<body>
<ul class="list">
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
<li class="pic"><div class="picture"></div></li>
</ul>
</body>
</html>

运行以后不断改变浏览器的宽度，图片元素布局会自动改变。

bootstrap框架用的就是媒体查询原理，我们做响应式布局的时候，基本都会借用bootstrap框架提高工作效率。

四、响应式优缺点

4.1、优点：

  • 面对不同分辨率设备灵活性强。
  • 能够快捷解决多设备显示的适应问题。

4.2、缺点：

  • 响应式网站无法区分移动端，所以会出现隐藏部分无用内容，浪费宽度，加载耗时长。响应式布局使用移动端窄屏时，隐藏内容依然会加载，低分辨率加载高质量图片或视频，不同屏幕尺寸都提供相同的网页，加载内容多，浪费流量，速度慢，容易造成用户流失。
  • 兼容所有终端，工作量大，效率低下。
  • 仅适用布局、信息、框架并不复杂的部门类型网站。
  • 响应式对于 低版本IE浏览器简直是悲剧。响应式里运用了很多html5新特性，而这些特性只要高级浏览器才支持，所以在IE6、7、8几乎是看不了的。
  • 响应式设计不利于百度关键词优化和排名。用户在不同终端搜索习惯不同，百度对移动端和PC端的关键词处理策略也不同，百度搜索排名也是有PC和移动端之分的，所以如果要做优化，不建议响应式布局。

建议你的网站最好分别制作移动端和PC端，这样网站性能、用户体验、用户留存相对来说会好很多。大公司它们的网站都是独立的，很少使用响应式布局。

1.《【ie总是未响应】专题前端响应式布局为什么是个坑？》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。

2.《【ie总是未响应】专题前端响应式布局为什么是个坑？》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/gl/djyxgl/195714.html