电商移动Web实战项目（5）

响应式

什么是响应式布局

响应式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（手机、平板、pc电脑、手表，电视） ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

为什么要有响应式布局？

• 在移动互联日益成熟的时候，在PC端开发的网页已经无法满足移动设备的要求。

• 通常的做法是针对移动端单独做一套特定的版本。

• 如果终端越来越多，那么需要开发的版本就会越来越多（大屏设备的普及）

• 响应式布局 ：一个网站能够兼容多个终端（节约开发成本）

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

*缺点： *

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

 

响应式开发现状：

• 如果已经存在PC的网站了，那么一般不会使用响应式开发，而是针对移动端再开发一套系统（比如京东、淘宝）

• 在新建站点 上采用响应式开发的越来越多。

• 在国内，响应式开发还不是特别的流行。但响应式开发是大势所趋，会越来越流行。

响应式开发与移动web开发的比较

开发方式	移动web开发+pc开发	响应式开发
引用场景	一般已经有了PC端网站，只需要端独开发移动端网站即可	针对一些新建网站，并且要求适配移动端
开发	针对性强，开发效率高	兼容各种终端，效率低
适配	只能适配移动端或者PC端，pad上体验比较差	可以适配各种终端
效率	代码简洁，加载快	代码相对复杂，加载慢

 

 

//思考：响应式开发的原理是什么？

媒体查询

媒体查询（Media Query）是CSS提出来的一个新的属性，通过媒体查询可以查询到screen的宽度，从而指定某个宽度区间的网页布局。

 

设备分类

分类	宽度范围
大屏设备	>1200px
中屏设备	992px~1200px
小屏设备	768px~992px
超小屏设备	< 768px

媒体查询的使用

需求：

响应式开发的原理：使用媒体查询实现不同终端的布局和样式的切换。

 

媒体查询语法：

/*查询屏幕*/
@media screen and 条件 {
}

/*条件的写法*/
/*min-width:只要屏幕宽度超过这个值的设备样式就能生效*/
/*max-width:只要屏幕宽度小于这个值的设备样式就能生效*/
@media screen and (min-width: 1200px) {
  .container {
    width: 1170px;
    background-color: red;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .container {
    width: 970px;
    background-color: blue;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .container {
    width: 750px;
    background-color: yellow;
  }
}

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    background-color: green;
  }
}

弊端：现在只有一个div，要做一套响应式布局，就需要如此多的代码，非常的麻烦，因此我们会更多的借助一些响应式的框架，比如bootstrap。

bootstrap框架

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

bootstrap中文网

特点：

• 组件简洁大方、代码规范精简、界面自定义性强。

• Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

• Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。

优点：

• 有自己的生态圈，不断的更新迭代

• 提供了一套简洁、直观、强悍的组件

• 标准化的HTML+CSS编码规范

• 让开发更简单，提高了开发效率。

• 扩展性强，虽然界面组件样式已经定义好了，我们还可以自定义，修改默认样式。

版本：

• 2.x.x 停止维护

  • 优点：兼容性好

  • 缺点：代码不够简洁、功能不够完善

• 3.x.x 目前使用最多

  • 优点：稳定，偏向于开发响应式布局，移动设备优先的WEB项目

  • 缺点：放弃了IE67，对IE8支持但是界面效果不友好

• 4.x.x 测试阶段

基本模板

目录结构说明

  
  
  
  
  
  
  
  

  
  
  
  
  
  


你好，世界！

全局样式

normalize.css

Normalize.css是一种CSS reset的替代方案。经过@necolas和@jon_neal花了几百个小时来努力研究不同浏览器的默认样式的差异，这个项目终于变成了现在这样。

官网

github网址

normalize的特点：

• 保护有用的浏览器默认样式而不是完全去掉它们

• 一般化的样式：为大部分HTML元素提供

• 修复浏览器自身的bug并保证各浏览器的一致性

• 优化CSS可用性：用一些小技巧

Normalize.css支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。

container容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。默认带了15px的padding值。

.container 类用于固定宽度并支持响应式布局的容器。

  ...

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

  ...

格系统，也叫网格系统

• .row用于抵消.container容器的15px的padding值

• 可以在.row中嵌套column

栅格系统常用类（总共12列）

类名	例子	解释
.col-xs-xx	.col-xs-6	在超小屏幕（及以上）生效
.col-sm-xx	.col-sm-6	在小屏幕（及以上）生效
.col-md-xx	.col-md-6	在中屏幕（及以上）生效
.col-lg-xx	.col-lg-3	在大屏幕及生效，占1/4
.col-lg-xx	.col-lg-4	在大屏幕及生效，占1/3
.col-lg-xx	.col-lg-6	在大屏幕及生效，占1/2

【案例：响应式栅格系统】

【案例：列嵌套.html】

【案例：列偏移.html】

响应式工具

//1. 大屏显示
//2. 中屏不显示
//3. 小屏显示
//4. 超小屏不显示

推荐使用hidden相关的属性

 

其他

bootstrap内置的东西是在太多，不可能每一个都详细的讲，但是bootstrap文档简洁明了，当我们用到了相关的东西的时候，再来详细的进行讲解。

 

微金所

目录结构

• wjs.............项目文件夹

  • js...................js文件目录

  • lib..................第三方框架目录

  • images...............图片文件目录

  • css..................css文件目录

  • fonts..............字体图标目录

  • favicon.ico..........网站图标

  • index.html...........站点入口

页面结构

向css文件中引入图标字体模板：

@font-face {
  	font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}