响应式布局初体验

一、响应式布局介绍

服务器端根据不同的浏览器客户端,为用户呈现不同的页面。对不同分辨率的设备,给出最佳的显示方案,是响应式设计的主要目的。使用响应式布局的好处有:

  • 让一个网站可兼容不同分辨率的设备
  • 给用户更好的视觉使用体验

1.1 基本背景介绍

在移动互联网浪潮到来之前,还没有响应式的概念,通常,我们在不同的设备上总是给用户展示同一个网页。但在移动互联网时代,由于不同设备(如Mac、PC、iPad、手机)的分辨率差别很大,这种做法给用户的体验非常不好。于是,催生了响应式布局的诞生。

1.2 认识响应式布局

看一个例子:http://jser.me,进入这个网页后,缩放浏览器窗口,发现页面的布局发生了变化。

1.3 优缺点

优点:

  • 解决了设备之间的差异化展示

缺点:

  • 兼容性代码多,工作量大,网站加载速度受影响
  • 对原有网站布局会产生影响,用户判断未必精确

1.4 设计原则

  • 移动优先:在设计的初期就要考虑到页面如何在多终端展示
  • 渐进增强:充分发挥硬件设备的最大功能

二、响应式布局设计初体验

2.1 如何实现响应式布局

  • CSS3-Media Query (最简单的方式)
  • 借助原生 Javascript (成本高,不推荐使用)
  • 第三方开源框架(可以很好地支持浏览器响应式布局的设计)

使用框架的好处很明显,可以减少很多代码的开发量,以及兼容性方面的工作量,优势很大。既然如此,为什么还要使用第一种方式呢?因为除了 PC 端的一些比较低端的浏览器,大部分设备都支持 CSS3 属性,CSS3-Media Query 足以满足我们大部分的需求。

2.2 CSS3-Media Query 简单案例

CSS3-Media Query,从字面理解,就是根据不同的媒体设备,给出不同的展示方式。

常见的属性:

  • device-width, device-height ——屏幕宽高
  • width, height                           ——渲染窗口宽高
  • orientation                               ——设备方向
  • resolution                                 ——设备分辨率

基本的语法:

  • 外联 CSS 语法
  • 内嵌样式的语法

下面做一个简单实例,当浏览器窗口可视区域的宽度小于 550px 时,背景为红色(外联 CSS 语法实现);大于 550px 时,背景为蓝色(内嵌样式的语法实现)。这里是演示地址:http://demo.baimoz.me/mediaquerydemo

创建外联样式表 link.css,里面只有一行代码:

body{background: red}

下面是 index.html 的内容:

<html>
<head>
    <link rel="stylesheet" href="link.css" type="text/css" media="only screen and (max-width:550px)">
    <style type="text/css">
        @media screen and (min-width: 550px) {
            body {background: blue;}
        }
    </style>
</head>

<body>
</body>
</html>

三、总结

本文中,我们介绍了响应式布局,并用 CSS3-Media Query 完成了一个非常简单的响应式案例。但是,在实际开发工作中,不大可能只用这么简单的方式,一般会使用比较成熟的响应式框架,如 BootStrap。

 

参考资料:慕客网课程——《响应式布局》