4

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

 2 years ago
source link: https://www.cnblogs.com/web-learn/p/15189009.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

一、什么是响应式布局？

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK