Responsive Web site summed up the essence of technology
1, two essential settings
<meta http-equiv="X-UA-Compatible" content="IE=7">
# The above code tells the IE browser, regardless of whether a DTD declaration document standard, IE8 / 9 IE7 engine will be to render the page.
<meta http-equiv="X-UA-Compatible" content="IE=8">
# The above code tells the IE browser, IE8 / 9 will be to IE8 engine to render the page.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
The code above tells the IE browser, version IE8 / 9 and beyond will be the highest version of IE to render the page.
<meta name="viewport" content="width=device-width, initial-scale=1" />
content property values:
width: the width of the visible region, may be a digital value or keyword device-width
height:同width
intial-scale: the page is first displayed is the zoom level of the visible area, the value of 1.0 according to the actual page size display without any scaling
maximum-scale amplification of the page the user can program, enlarged to 1.0 prevents the user on the actual size.
user-scalable: whether a page zoom, no zoom ban
2. Analyzing the portrait
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait-screen.css">
* Depending on the resolution of relevant properties is determined as follows, media queries
- 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;
}
}
- 调用
<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-width:800px)" href="800wide-portrait-screen.css" href="portrait-screen.css">
3百分比宽度计算:
目标元素宽度/上下文元素的宽度=百分比宽度
目标元素宽度/父元素的宽度=百分比宽度
4.弹性图片(或其它)
img,object,video,embed{ width:100%}
永远是相对于父标签的100%，也可以是其它的合适比例
为特定的图片指定特定规则
<img class="sideImage" src="..." alt="this is a img" />
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.
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-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:' ' //缩进嵌套选项的字符串
})
})
}
}
]);
完整补丁包
<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]-->