第一章 HTML5-CSS及响应式入门

移动网站：移动版网站-专门针对手机的网站。
手机APP（appliction）-开发工具：Android/Ios

问题一：响应式设计好不好？
答：一个网站可根据屏幕大小改变布局和样式。响应式设计是能在各种
设备上良好显示的设计。

问题二：响应式设计的定义。
其他名称：流式布局，弹性布局，自适应布局。

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

	从大屏到小屏设计为小屏到从小屏到大屏的转变

1
响应式设计是针对任意设备对网页内容进行完善布局 的显示机制。

三、响应式网页设计测试
1.如何测试？
a).准备各种屏幕设备
b).通过插件将浏览器窗口设定为指定像素
例：chorme-windows 、resizer、firefox-resizeme
c).直接拖动改变浏览器窗口大小可以调试大多数显示效果（很实用）

注意：视口和屏幕的区别：
视口：设备屏幕的大小
屏幕：显示网页内容的区域：width,height

2.几个响应式的示例网站
网址：blog.teamtreehouse.com、2011.clonstruct.org、http://Mediaqueri.es

四.HTML5
1.HTML5有一些新增的语义元素

2.H5拥有表单交互的功能。

3.写H5比以前更简洁

4.CSS为响应式设计奠定基础
(1).网页布局模式的转变:《table》(此处不能显示单括号)布局→《div》css布局→《div》布局、CSS2布局→《div》CSS3布局
(2).www.csszengarden.com(禅意花园)
(3)CSS的特点：不破坏任何东西，若浏览器不支持，则会自动忽略，不影响基本显示。
六.CSS3设计实现
1.滑动门技术（CSS2）；——CSS3拥有圆角设置样式。

2.CSS3渐变背景的实现
网址：（1）.demamarcofolio.net/3d.animation-css/;(2).designlovr.com;(3).www.andthewinnerisnt.com(响应式网页)

作者：Ailisidiyanuo
来源：CSDN
原文：https://blog.csdn.net/Ailisidiyanuo/article/details/82972860?utm_source=copy
版权声明：本文为博主原创文章，转载请附上博文链接！