前端响应式布局为什么是个坑？

呆呆

修改于 2021-09-30 09:59:53

9250

修改于 2021-09-30 09:59:53

文章被收录于专栏：centosDai

一、什么是响应式布局？

响应式设计：Responseive design，就是一个网站，一套代码能在所有终端能够正常展示，并不是为每个终端做一个特定版本，响应式是为解决移动互联网浏览器而诞生的。

二、响应式设计步骤

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端，这样网站性能、用户体验、用户留存相对来说会好很多。大公司它们的网站都是独立的，很少使用响应式布局。

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html