响应式网站技术精要总结
1、两个必不可少的设置
<meta http-equiv="X-UA-Compatible" content="IE=7">
#以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=8">
#以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。
<meta name="viewport" content="width=device-width, initial-scale=1" />
content属性值 :
可视区域的宽度，值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放
2.判断纵屏
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait-screen.css">
**根据不同分辩率判断相关属性如下，媒体查询
- screen-style.css
断点
@media screen and (min-1001px) and (max-1920px) {
body {
background-color:red;
}
}
@media screen and (min-805px) and (max-1000px) {
body {
background-color:blue;
}
}
@media screen and (min-600px) and (max-804px) {
body {
background-color:green;
}
}
@media screen and (min-100px) and (max-599px) {
body {
background-color:black;
}
}
- 调用
<link rel="stylesheet" media="screen" href="screen-style.css">
如果是纵向旋转的屏幕，则可创造建如下复合查询
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait-screen.css"
只有窗口宽度大于800像素的纵向显示器加载样式文件
<link rel="stylesheet" media="screen and (orientation:portrait)" and (min-800px)" href="800wide-portrait-screen.css" href="portrait-screen.css">
3百分比宽度计算:
目标元素宽度/上下文元素的宽度=百分比宽度
目标元素宽度/父元素的宽度=百分比宽度
4.弹性图片(或其它)
img,object,video,embed{ 100%}
永远是相对于父标签的100%，也可以是其它的合适比例
为特定的图片指定特定规则
<img class="sideImage" src="..." alt="this is a img" />
css:
img{ max-100%}
.sideBlock img{ max-45%}
防止图片无限缩放，给予最外层元素设置max-width属性
.wrapper{
margin-right:auto;
max-1414px;
}
4.补丁[低版本兼容]
A.
Modernizr(http://www.modernizr.com)
用于向缺少h5与css3的浏览器打补丁
B.
H5表单补丁
c. 1.下载网址:https://github.com/scottjeh1/Respond
2. 追加引用,放在modernizr.js之后
<script src="js/respond.min.js"></script>
3.避免在每个IE中都加载
<!--[if lte IE 8]
<script src="js/respond.min.js"></script>
![endif]
-->
为那些不支持css3媒体查询的浏览器(ie6 7 8)加载Respond.js
D.
小屏时将导航链接转换为下拉菜单
1.下载脚本程序http://github.com/mattkersley/Responsive-Menu jquery.mobilemenu.js
2.给每个页面的导航链接部门设置一个id
<nav role="navigation"> <ul id="mainNav">
......
</ul>
</nav
或:或在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-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:' ' //缩进嵌套选项的字符串
})
})
}
}
]);
完整补丁包
<script src="jquery-1.8.1.js"></script>
<script src="../js/modernizr-custom.js"></script>
<script src="../js-webshim/minified/polyfiller.js"></script>
之中含normalize.css、polyfill和一些必要的工具如Modernizr
自动为CSS3增加前缀的代码片段
-prefix-free
让视频大小自适应
1.下载插件http：//daverupert.com/2011/09/responsive-video-embeds.with-fitvids/
2.引入并调用
a.<script src="js/fitvids.js"></script>
b.为引用视频的文件设置id如id="content"
<script>
$(document).ready(function(){
$("#content").fitvids();
})
</script>
附:
html5验证工具
IE Tester
如何让ie8支持html5
方法1:
<!--以下代码强制IE8正常显示htm 20l520150824-->
<!--[if lte IE 9]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,,figcaption,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
方法2:
<!--[if lt IE9]>
<![endif]-->
方法3:
动态模板
<!--[if lt IE 9]>
{% javascript 'html5' %}
<![endif]-->
静态网站(无误):
<!--[if lt IE 9]>
<script src="../js/html5.js"> </script>
</script>
<![endif]-->