iyang519 / h5-css3 Goto Github PK

##响应式web设计 1.问题的提出：手机浏览器会将一个标准网页缩小至与设备可视区恰好匹配，然后用户在自己感兴趣的内容区域放大浏览。为了看清楚内容，需要不停放大缩小页面，还可以不小心点到了链接

2.H5化繁为简

• 标准的HTML4.01网页文档类型声明如下

"http://www.w3.org/TR/html4/loose.dtd"> H5为

• HTML4.01链接脚本正确方法为

<script src="js/jquery.js" type="text/javascript"></script>

H5为 [<script src="js/jquery.jss"></script>]

3.H5语义化 搜索引擎可以更好理解我们的网页，并评定里面的内容。

4.CS3不破坏任何东西：在老版本浏览器中使用他们无法解析的属性，不会造成任何问题，会欣然忽略无法解析的属性，使我们可以对先进的浏览器进行渐进增强，为老版本浏览器提供合理的降级处理。

5.媒体查询语法，语法很多，列举较常用的。

• css样式表中使用媒体查询

@media screen and (max-width: 960px){}

• 样式表，询问是否为一块纵向放置的显示屏，进而加载portrait-screen.css

非纵向放置的屏幕

• 设置视口宽度大于800px才加载文件

• 建议在已有的样式表加入媒体查询，而不是使用@import url("...") screen and ....;因为在ie8以及低版本不支持@import，增加了http请求数量。

6.meta标签可以设置具体的宽度或缩放比例

• 设置缩放范围

• 禁止缩放

7.流式布局，基于百分比布局创建流动弹性布局，使用媒体查询来限制元素变动范围，组合构建响应式设计核心。

• 固定元素宽度/上下文元素宽度=百分比宽度。 注意：除后的小数点不要四舍五入，这样可以提供更加精确的结果。