第一章 HTML5,CSS3及响应式设计入门恢复

移动版站点<专门针对手机的网站>

手机APP<APPLICATION>   开发工具：Android\IOS

一，响应式设计好不好？

一个网站可以根据屏幕大小进行改变布局，样式。

响应式设计是能在各种设备上良好显示的设计。

二，响应式设计的定义

其他名称：流式布局  弹性式布局  自适应布局

真正的响应式设计不仅仅是根据屏幕大小改变网页布局而是理念的转变。

从先大屏设计为小屏设计的理念到先小屏再大屏的转变。

注意：响应式设计是针对任意设备对网页内容进行完善布局的现实机制。

三   响应式网页设计测试

1，如何测试：

a 准备各种屏幕设备

b 通过插件将浏览器窗口设定为指定像素（chrome windons resizer <插件名称> firefox-resizeme）

c 直接拖动改变浏览器窗口大小可以调试大多数的显示效果

*视口，屏幕的区别

视口：显示网页内容的区域       视口宽，高：weight   height

屏幕：设备的屏幕大小          屏幕宽，高：divice-w   divice-h

2，几个响应式的设计<blog.teamtree house.com>

四，HTML5  <H5>

1,   H5有一些新增的语义元素   <header>头部   <nav>导航

2， H5拥有表单交互的功能，减少了大量JS代码

3， 写H5比 以前更简洁

五，CSS为响应式设计奠定基础

1， 网页布局模式的转变：<table>布局——<div>css布局——<div>css3布局

2， www.csszenggarden.com  禅意花园

3， CSS特点：不破坏任何东西，若浏览器不支持则会自动忽略，不影响基本显示

六， CSS3设计实现

1， 滑动门技术CSS2-CSS3拥有圆角设置的样式

2， CSS3渐变背景的实现