响应式网页开发

2018-04-11 本文已影响0人李华炎

响应式布局

什么是响应式布局？
- 可以让一个网站兼容不同分辨率设备的布局
为什么要使用响应式布局？
- 给用户更好的视觉使用体验
怎么使用响应式布局？
- CSS3-Media Query（媒体查询），推荐使用，最简单
- 借助原生javascript ，不推荐使用，成本太高
- 第三方开源框架，如：bootstrap是一个响应式布局应用的框架

响应式设计的原则

移动优先：
- 在设计初期就要考虑页面在多终端上展示（优先）
- 传统网页再改移动端有些功能会损失，难度也比较大
渐进增强：保证基本功能，再发挥设备支持的最大功能
优雅降级(推荐)
- 充分发挥硬件设备的最大功能（能支持最新技术的浏览器就使用最新的技术，不能最新技术的浏览器就降级或使用hack技术）

响应式网站设计理念

响应式网站是一个设计理念，它是多项技术的综合体

网站能够自动切换以适应不同分辨率，图像大小和脚本。他应该有一个灵活的网格和布局，图像和CSS能够智能的组合使用

应用技术

1.flexible grid layout 弹性网格布局

2.flexible image 弹性图片

3.media queries 媒体查询

响应式网站的优点

减少工作量

节省时间

适配所有设备

搜索优化

统计用户访问流量

响应式网站的缺点

会加载更多的样式和脚本资源

设计比较难精准定位和控制

老版本浏览器兼容不好

该如何实现？

图片：如何根据设备不同的分辨率及屏幕大小来加载对应的图片？

思维：标签的data属性

<img src="small.jpg" data-full="larger.jpg">

<!--也可以使用picture 标签，但是浏览器兼容性不好，需要使用picturefill.min.js-->
<div class="item">
      <picture>
      <source srcset="img/ad001-l.png" media="(min-width:50em)">
      <source srcset="img/ad001-m.png" media="(min-width:30em)">
      <img src="img/ad001.png" alt="2015年度报告">
      </picture>
</div>

视口：禁用图片的自动缩放

<meta name="viewport" content="width=device-width; initial-scale=1.0">

打造布局结构：不同设备的屏幕尺寸差异过大时应加载不同的样式文件以适配不同的结构或使用CSS media query。

我们可以使用一个默认主样式表来定义页面的主要结构元素，比如#wrapper、#content、#sidebar、#nav等的默认布局方式，以及一些全局性的配色和字体方案。

我们可以监测页面布局随着不同的浏览环境而产生的变化，如果它们变的过窄过短或是过宽过长，则通过一个子级样式表来继承主样式表的设定，并专门针对某些布局结构进行样式覆写。我们来看下代码示例：

下面的代码可以放在默认主样式表style.css中：

/* 大众化使用时的默认样式 */
html,body{
   background...
   font...
   color...
}
h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}
/* 主要结构样式 */
#wrapper{
    width: 80%;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
}
#content{
    width: 54%;
    float: left;
    margin-right: 3%;
}
#sidebar-left{
    width: 20%;
    float: left;
    margin-right: 3%;
}
#sidebar-right{
    width: 20%;
    float: left;
}

/* 下面代码可以放在子级样式表mobile.css中，专门针对移动设备进行样式覆写： */
#wrapper{
    width: 90%;
}
#content{
    width: 100%;
}
#sidebar-left{
    width: 100%;
    clear: both;
    /* 不同设备上可以附加适合的样式 */
    border-top: 1px solid #ccc;
    margin-top: 20px;
}
#sidebar-right{
    width: 100%;
    clear: both;
    /* 不同设备上可以附加适合的样式 */
    border-top: 1px solid #ccc;
    margin-top: 20px;
}*/

大致的视觉效果如下图所示：

css.jpg

media query(媒体查询)

CSS3支持CSS2.1所支持的所有媒体类型，例如screen、print、handheld等，同时添加了很多涉及媒体类型的功能属性，包括 max-width(最大宽度)、device-width(设备宽度)、orientation(屏幕定向，横屏或竖屏)和color。

在CSS3发布之后出现的新玩具，如iPad或Android相关设备，都可以完美的支持这些属性。所以我们可以通过media query为新设备设置独特的样式，而忽略那些不支持CSS3的台式机中的旧浏览器。

media query使用实例：屏幕宽度不超过480px，则加载shetland.css样式表。
```
<link rel="stylesheet" type="text/css"  media="screen and (max-device-width: 480px)"    href="shetland.css" />
```
我们可以创建多个样式表，以适应不同设备类型的宽度范围。但更有效率的做法是，将多个media queries整合在一个样式表文件中，减少请求数量。如下：
```
/* CSS2.1与CSS3都支持的代码 */
/* 智能手机 ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* 或 ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* 或 ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
```

可以使用媒体查询过滤屏幕尺寸

使用代码加载样式

<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(window).bind("resize", resizeWindow);
        function resizeWindow(event) {
            var newWindowWidth = $(window).width();
            if (newWindowWidth < 600) {
                  // 手机
                $("link[rel=stylesheet]").attr({href: "mobile.css"});
            } else if (newWindowWidth > 600) {
                  // 电脑
                $("link[rel=stylesheet]").attr({href: "style.css"});
            }
        }
    });
</script>

媒体查询详解

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

<style>
    body{
        background-color: pink;
    }

    /*内嵌式*/
    @media screen and (min-width: 992px){
        body{
            background-color: purple;
        }
    }
</style>

<!--外联式 ： 外联式要在默认样式的后面-->
<link type="text/css" rel="stylesheet" href="media.css" media="screen and (max-width:480px)" />

<!-- 
css3的使用 

all : 可以省略不写，默认就是all
or  : 逻辑的操作符，代表或，只要匹配一个条件就是true
not ：逻辑的操作符，代表非，
and : 逻辑的操作符，代表与，全部条件都要匹配才是true
only：逻辑的操作符, 代表仅仅，为了适配老版本的浏览器
-->
<!-- 1. --> 
@media all and (min-width:800px) and (orientation:landscape) {
    ...
}
等价于下面的
@media and (min-width:800px) and (orientation:landscape) {
    ...
}

<!-- 2. --> 
@media not all and (monochrome) {...}
等价于下面的
@media not (all and (monochrome)) {...}


<!-- 3. --> 
@media not screen and (color), print and (color) {...}
等价于下面的
@media not screen and (color) or print and (color) {...}
等价于下面的
@media (not (screen and (color))), print and (color) {...}

css3媒体属性

width : 视口宽度

height : 视口高度

device-width : 设备屏幕宽度

device-height : 设备屏幕高度

orientation : 检查设备处于横向还是纵向

aspect-ratio : 基于视口宽度和高度的宽高比(width/height) 如：16/9 , 4/3

device-aspect-ratio : 渲染表面的宽度，就是设备屏幕的宽度

color : 每种颜色的位数 bits 如：min-color : 16位，8位

resolution : 检查屏幕或打印机的分辨率如：min-resolution : 300dpi

viewport视口的概念

视口分 3 种

布局视口 960px ，布局视口不会被改变的

可视视口即设备上可见的视口，使用手指缩放时改变的是可视视口的大小

理想视口是指布局视口在一个设备上的最佳尺寸，便于使用浏览器浏览，阅读

<!--  指定下面的代码后，布局视口就成为理想视口，阅读体验会更好，网页不会出现被放到的效果 -->
<meta name="viewport" content="width=device-width"/>

<!--  还可以这样 -->
<meta name="viewport" content="width=device-width,
                               minimum-scale=1.0,   //最小的缩放比例
                               maximum-scale=1.0,   //最大的缩放比例
                               user-scalable=no     //禁用用户缩放
                               " />

响应式网站开发过程

1.分析页面结构

ui设计师根据需求文档做好ui设计图，前端拿到效果图后根据效果图进行页面分析，确定哪些部分可以复用，哪些不能复用。哪些内容是固定尺寸，哪些内容可以自适应等

2.依照设计原则

优先考虑优雅降级(渐进增强不太适合)

案例

案例1：改变浏览器的width加载不同的背景色

media.html文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 媒体查询</title>

    <style>
        body{
            background-color: pink;
        }

        /*内嵌式*/
        @media screen and (min-width: 992px){
            body{
                background-color: purple;
            }
        }
    </style>

    <!--外联式-->
    <link type="text/css" rel="stylesheet" href="media.css" media="screen and (max-width:480px)" />
</head>
<body>

</body>
</html>

外联文件media.css

body{
    background-color: chartreuse;
}

学习响应式开发的参考连接

http://gs.statcounter.com/ 可以按照国家来划分,浏览器使用率
http://caniuse.com/usage-table 浏览器使用统计, 面向世界
http://necolas.github.io/normalize.css/ 在保证各浏览器呈现一致的情况下，保留了各标签元素原有的特点
http://autoprefixer.github.io/ 自动补全各游览器前缀css代码
http://editor.method.ac/ 在线绘制SVG
https://icomoon.io/ 在线绘制SVG
http://dillinger.io/ markdown 文件在线编写
https://tinypng.com/ 图片压png
http://caniuse.com/ 查询属性、标签兼容性
http://www.genymotion.net/ 最快的安卓模拟器
http://owlcarousel.owlgraphic.com/ 幻灯片插件
https://modernizr.com/ 会主动检测浏览器对css3、HTML5等等功能性的支持情况。
http://browsehappy.com/ 最新游览器下载
http://www.browsersync.cn/ 各浏览器终端同步测试
http://browserhacks.com/ 各浏览器hack写法查询
https://github.com/aFarkas/html5shiv 让老版本浏览器支持HTML5新标签
https://github.com/scottjehl/Respond IE6-8支持媒体查询min/max-width特性
https://modernizr.com/ 检测浏览器是否支持某特性

链接：http://www.imooc.com/article/12343#parent_6