响应式一定是最佳的选择嘛？
如果预算充足且形式需要，做一个真正的“手机版”网站是首选。这样就可以基于用户的设备、位置、连接速度，以及包括技术特性在内的其他变量来提供不同的内容、设计和交互。
接手新项目时，不论响应式是否合适，试着给用户说明以下几点：
- 允许页面显示效果在老旧浏览器中有细微的差别，这样可以使代码更易维护，将来更新的成本也更低；
- 让页面元素在那些老旧的浏览器（如IE8及更低版本）中表现一致会导致网站增加大量的图片。这会使网站变慢，制作成本变高，而且更难维护。
- 现代浏览器可以理解的简洁代码等同于更快速的网站。哭诉响应的网站在搜索引擎中的评价高于慢腾腾的网站。
- 使用老旧浏览器的用户越来越少，使用现代浏览器的用户越来越多——我们应该支持大多数!
- 最重要的一点，支持现代浏览器，你就能尽情地享受响应式网页设计，它能响应不同设备的不同浏览器视口。
HTML5部分：
html5文档类型声明：
<!doctype html>
html5链入脚本文件：
<script src="js/test.js"></script>
html5链入样式文件：
<link rel="stylesheet" src="css/test.css">
html5新增标签：
section：定义文档或应用程序中的区域；
nav：定义文档的主导航区域；
article：用来包裹独立的内容片段；
aside：用来表示与页面主内容松散相关的内容；
header：定义文档的头部区域；
footer：定义文档的底部区域；
address：定义文档的联系信息区域；
...
HTML5表单的新输入类型（语义化输入类型，部分设备会为对应的输入类型匹配合适的键盘模式）：
- email：邮件类型输入框——邮件类型实例;
- number：数字类型——数字类型实例；
- url：URL地址类型——地址实例;
- tel：电话输入框——电话类型实例；
- search：搜索输入框——搜索类型实例;
- color：颜色输入框——颜色类型实例;
- date：日期输入框——日期类型实例;
- month：年月输入框——年月类型实例;
- week：周输入框——周类型实例;
- time：时间输入框——时间类型实例;
- datetime：日期时间选择器——日期时间类型实例;
- range：范围选择器——范围选择类型实例;
表单元素中的属性（）：
1.required：添加该属性说明该表单为必填项；
2.autofocus：表单域默认聚焦；
3.autocomplete：自动补全，属性值为off或on；
4.list：显示一组备选值——[list实例](http://jsbin.com/damapegibe/edit?html,output);
5.pattern：正则匹配属性——[pattern实例](http://jsbin.com/topana/edit?html,output);
媒体查询能检测哪些特性：
- width：视口宽度；
- height：视口高度；
- device-width：渲染设备屏幕的宽度；
- device-height：渲染设备屏幕的高度；
- orientation：检查设备出于横向还是竖向；
...
响应式中需要牢记的公式：
目标元素宽度 / 上下文元素宽度 = 百分比宽度；
目标元素行高 / 目标元素高度 = 百分比行高；
HTML5中的video标签属性：
- autoplay：资源加载完毕后自动播放视频；
- controls： 显示标准的 HTML5 视频/音频播放器控制条、控制按钮；
- loop：循环播放视频；
- poster：存放与视频相关的预览图；
- preload：缓存视频；
eg：
<video width="320" height="240" poster="img/test.jpg" controls preload="auto">
<source src="/i/movie.mp4" type="video/mp4">
<source src="/i/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
-
响应式视频
删除video标签中的width、height属性，在css中追加如下代码：
video {
max-width：100%；
height：auto；
}
CSS3部分：
使图片自动缩放至与其容器100%匹配：
img {
max-width：100%；
}
nth规则：
li：nth-child（2n+3）——从右边开始（第三个元素开始）分析，每两个元素选择一个；
CSS3中可使用的颜色属性除了rgba外，还可使用hsl(色相，饱和度，亮度)，hsla(色相，饱和度，亮度，透明度)。第一个h代表色相，60度时为黄色，120度时为绿，180度时为青，240度时为蓝，300度时为洋红色，360度时为红色：
hsla(60,90%,50%,.8); 此时为黄色
网友评论