响应式开发

一：网页布局方式

 

一、固定宽度布局：为网页设置一个固定的宽度，一般以px作为长度单位，常见于PC端网页。

二、流式布局：为网页设置一个相对的宽度，一般以百分比作为长度单位。

三、栅格化布局：将网页宽度人为的划分红均等的长度，而后排版布局时则以这些均等的长度作为度量单位，一般利用百分比作为长度单位来划分红均等的长度。

四、响应式布局：经过检测设备信息，决定网页布局方式，即用户若是采用不一样的设备访问同一个网页，有可能会看到不同的内容，通常状况下是检测设备屏幕的宽度来实现。

注：以上几种布局方式并非独立存在的，实际开发过程当中每每是相互结合使用的。

 

二：响应式布局

Responsive design，意在实现不一样屏幕分辨率的终端上浏览网页的不一样展现方式。经过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

屏幕尺寸不同展现给用户的网页内容也不同，咱们利用媒体查询能够检测到屏幕的尺寸（主要检测宽度），并设置不一样的CSS样式，就能够实现响应式的布局。

咱们利用响应式布局能够知足不一样尺寸的终端设备很是完美的展示网页内容，使得用户体验获得了很大的提高，可是为了实现这一目的咱们不得不利用媒体查询写不少冗余的代码，使总体网页的体积变大，应用在移动设备上就会带来严重的性能问题。

响应式布局经常使用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互。

三：响应式开发

1. 什么是响应式开发

a)         在移动互联日益成熟的时候，桌面浏览器上开发的网页已经不能知足移动端的设备的展现和阅读

b)         以前，一般的作法是对移动端单独开发一套特定的版本

c)         可是，若是移动终端设备起来越多的时候赋发成本太大，是由于须要作全部屏幕的适配

d)         响应式开发的目的就是:一个网站可以兼容多种终端

e)         在新建的网站上通常都会使用响应式开发

f)          移动web开发和响应式开发是必须具有的技能

g)         演示响应者页面

1. 响应式开发的原理：媒体查询：

a)         查询媒介，查询到当前屏幕(媒介媒体)的宽度，针对不一样的屏幕宽度设置不一样的样式来适应不一样屏幕。当你重置浏览器大小的过程当中，页面也会根据浏览器的宽度和高度从新渲染页面。简单说，你能够设置 不一样屏幕下面的不一样的样式，达到适配不一样的屏幕的目的。

b)         实现方式：经过查询screen的宽度来指定某个宽度区间的网页布局。

超小屏幕      （移动设备）         w<768px

小屏设备    768px-992px          768 <= w <992

中等屏幕    992px-1200px     992 =< w <1200

宽屏设备    1200px以上      w>=1200

 

1. 媒体查询的基本实现方式：经常使用属性设置: http://www.runoob.com/cssref/css3-pr-mediaquery.html

a)         CSS 语法

@media mediatype and|not|only (media feature) {

    CSS-Code;

}

你也能够针对不一样的媒体使用不一样 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

b)         媒体类型

值                            描述

all                                      用于全部设备

print                        用于打印机和打印预览

screen                    用于电脑屏幕，平板电脑，智能手机等。

speech                   应用于屏幕阅读器等发声设备

c)         媒体功能

值                                               描述

device-height                          定义输出设备的屏幕可见高度。

device-width                           定义输出设备的屏幕可见宽度。

max-device-height                 定义输出设备的屏幕可见的最大高度。

max-device-width                  定义输出设备的屏幕最大可见宽度。

min-device-width                   定义输出设备的屏幕最小可见宽度。

min-device-height                  定义输出设备的屏幕的最小可见高度。

max-height                              定义输出设备中的页面最大可见区域高度。

max-width                               定义输出设备中的页面最大可见区域宽度。

min-height                               定义输出设备中的页面最小可见区域高度。

min-width                                定义输出设备中的页面最小可见区域宽度。

d)         简单案例说明：控制不一样屏幕尺寸下的屏幕背景色

<style>
    .container{
        width:1200px;
        margin: 0 auto;
        height:1200px;
        background-color: red;
    }
    /*媒体查询：注意and后面空格的添加*/
    /*iphone: w < 768px*/
    @media screen and (max-width: 768px){
        .container{
            width:100%;
            background-color: green;
        }
    }
    /*pad: w >= 768  && w< 992*/
    @media screen and (max-width: 992px) and (min-width: 768px) {
        .container{
            width:750px;
            background-color: blue;
        }
    }
    /*中等屏幕   w >= 992  && w<1200*/
    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .container{
            width:970px;
            background-color: pink;
        }
    }
</style>

四：CSS框架

随着Web应用变的愈来愈复杂，在大量的开发过程当中咱们发现有许多功能模块很是类似，好比轮播图、分页、选项卡、导航栏等，开发中每每会把这些具备通用性的功能模块进行一系列封装，使之成为一个个组件应用到项目中，能够极大的节约开发成本，将这些通用的组件缩合到一块儿就造成了前端框架。

1.    Bootstrap

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

来自 Twitter，粉丝众多，是目前最受欢迎的前端框架。

2.   Amaze UI

Amaze ~ 妹子UI，国人开发，后起之秀！

3.   Framework7

Framework7 是一个开源免费的框架能够用来开发混合移动应用（原生和HTML混合）或者开发 iOS & Android 风格的WEB APP。

五：Bootstrap框架

1)         Bootstrap框架：提升web开发效率

e)         Bootstrap简介：当前最流行的前端UI框架(有预制界面组件), Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目

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

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

f)          为何 使用Bootstrap:

                                       i.              有本身的生态圈，不断的更新迭代

                                     ii.              提供一套简洁，直观，强悍的组件

                                    iii.              标准化的html+css编码规范

                                    iv.              让开发更简单，提升了开发效率

                                     v.              能够进行自定义扩展

g)         BootStrap的版本了解

                                       i.              2.x.x:兼容性好  / 代码不够简洁，功能不够完善

                                     ii.              3.x.x:稳定性好,放弃了IE6-IE7,对IE8的支持通常 /偏向于响应式布局开发，移动设备优先的web项目开发

                                    iii.              4.x.x:测试阶段，偏向于响应式，移动设备

五：LESS

LESS 是动态的样式表语言，经过简洁明了的语法定义，使编写 CSS 的工做变得很是简单，本质上，LESS 包含一套自定义的语法及一个解析器。

6.1. 

安装

一、安装Nodejs环境 Node Package Manager (验证 node -v  npm -v) npm:node packge manager

二、打开控制台（cmd），执行npm install -g less (验证 lessc -v) node packet manager

三、命令行编译 lessc path/xxx.less path/xxx.css

编译

浏览器只能识别CSS，LESS只是用来提高CSS可维护性的一个工具，所最终须要将LESS编译成CSS，然而经过命令行编译效率比较低下，通常都会借助于编辑器来完成编译，以sublime_text为例，sublime_text默认并不支持LESS的编译操做，须要安装插件实现。

一、执行npm install -g less-plugin-clean-css（使用sublime_text才用）

二、ctrl+shit+p打开命令面板

三、输入install package而后回车

四、安装 LESS、lessc、Less2Css三个插件

五、alt+s快捷键便可实现编译

语法

一、变量

格式：@变量名: 值，定义完成后能够重复使用

 

见代码示例6-1.less

二、混合

咱们能够像使用函数同样来使用CSS

见代码示例6-2.less

三、嵌套

嵌套能够很是方便的管理咱们的CSS层级关系

见代码示例6-3.html

浏览器中使用

了解了LESS基本语法后，能够用LESS写编写CSS代码了，可是须要实时的将LESS编译成CSS浏览器才能识别，利用编辑器可以编译，可是效率相对较低。

咱们能够引入一个less.js文件，实现实时的解析，而没必要每次修改都要编译，最后完成全部开发任务后，再经过编辑器编译成css文件。

一、下载而后引入less.js

二、引入xx.less文件，如：

<link rel="stylesheet/less" type="text/css" href="styles.less" />

注意：rel属性必须指定成stylesheet/less，而且styles.less要先于less.js引入。

必须以服务器方式访问，webstrom自带服务器功能也可使用ghostlab调试工具的服务器。