web-learn

一、什么是响应式布局?

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

分类:

技术点:

相关文章: