响应式布局初体验

桩白墨
前端笔记
2016-05-26
132热度
0评论

导航

一、响应式布局介绍

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

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

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。

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