响应式网站技术精要总结
1、两个必不可少的设置
#以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。
#以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。
以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。
content属性值 :
width:可视区域的宽度，值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放
2.判断纵屏
**根据不同分辩率判断相关属性如下，媒体查询
- screen-style.css
断点
@media screen and (min-width:1001px) and (max-width:1920px) {
body {
background-color:red;
}
}
@media screen and (min-width:805px) and (max-width:1000px) {
body {
background-color:blue;
}
}
@media screen and (min-width:600px) and (max-width:804px) {
body {
background-color:green;
}
}
@media screen and (min-width:100px) and (max-width:599px) {
body {
background-color:black;
}
}
- 调用
如果是纵向旋转的屏幕，则可创造建如下复合查询
只有窗口宽度大于800像素的纵向显示器加载样式文件
3百分比宽度计算:
目标元素宽度/上下文元素的宽度=百分比宽度
目标元素宽度/父元素的宽度=百分比宽度
4.弹性图片(或其它)
img,object,video,embed{ width:100%}
永远是相对于父标签的100%，也可以是其它的合适比例
为特定的图片指定特定规则
css:
img{ max-width:100%}
.sideBlock img{ max-width:45%}
防止图片无限缩放，给予最外层元素设置max-width属性
.wrapper{
margin-right:auto;
max-width:1414px;
}
4.补丁[低版本兼容]
A.
Modernizr(http://www.modernizr.com)
用于向缺少h5与css3的浏览器打补丁
B.
http://afarkas.github.com/webshim/demos/
H5表单补丁
c. 1.下载网址:https://github.com/scottjeh1/Respond
2. 追加引用,放在modernizr.js之后
3.避免在每个IE中都加载
为那些不支持css3媒体查询的浏览器(ie6 7 8)加载Respond.js
D.
小屏时将导航链接转换为下拉菜单
1.下载脚本程序http://github.com/mattkersley/Responsive-Menu jquery.mobilemenu.js
2.给每个页面的导航链接部门设置一个id
......
或:或在resopond.js或其它中追加如下代码 p227
Modernizr.load([
{
test:Modernizr.mq('only all'),
nope:'js/respond.min.js'
},
{
//如果max-width等于600PX，则加载菜单转换脚本
test:Modernizr.mq('only screen and (max-width:600px)'),
yep:['js/jquery-1.71.1.js', 'js/jquery.mobilemenu.js'],
complete:function(){
//资源完全加载后运行
$(document).ready(function()){
$('#mainNav').mobileMenu({
switchWIDTH:600, //转换宽度(用px表示)
topoptionTest:'select a page' //第一个选项的内容
indentString:' ' //缩进嵌套选项的字符串
})
})
}
}
]);
完整补丁包
样板文件:http://html5boilerplate.com
之中含normalize.css、polyfill和一些必要的工具如Modernizr
自动为CSS3增加前缀的代码片段
-prefix-free
下载地址:http://leaverou.github.com/prefixfree
让视频大小自适应
1.下载插件http：//daverupert.com/2011/09/responsive-video-embeds.with-fitvids/
2.引入并调用
a.
b.为引用视频的文件设置id如id="content"
附:
html5验证工具
http://validator.nu
IE Tester
http://www.mydebugbar.com/wiki/IETester/HomePage
如何让ie8支持html5
方法1:
方法2:
方法3:
动态模板
静态网站(无误):