HTML5 and CSS3 实战经典教程，相应式设计
1. meta viewport:
阻止移动浏览器自动调整页面大小: <meta name=‘viewport“ content="width= device-width,initial-scale=2.0，user-scalable=no">
<meta>标签中可以设置具体的宽度（如像素值）或者缩放比例如2.0（设备实际尺寸的两倍 user-scalable=no 即是禁止缩放。 最好设成initial-scale=1.0。
2. 媒体查询： 媒体查询只能为我们提供自适应设计效果，不能真正实现响应式设计。对于响应式设计来说，媒体查询是必需的 ,更需要流式布局。@media screen and（max-width：380px）{body{background-color:red;}}， @media screen and（min-width：700px）
3. 什么是流式布局？P57
使用相对宽度，相对像素，而不是使用固定像素。
width = 23% percent, 大起作用。
字体 px 换成 em 等等。
4.
妮子脚本： modernizr
页面中引入妮子脚本后，页面中用firebug 看到head 中加入很多属性 ，这时候在页面中加的css 如果包含这个属性 就执行，如果不包含就执行no-属性
例子：
.boxshadow #tel { box-shadow: #666 1px 1px 1px;}
.no-boxshadow #tel { border: 2px solid black;}
5Responde.js 可以实现IE<8 的宽度媒体查询功能，为了引入这个js，我们需要判断是否需要引入这个js
<!--[if lte IE 8]>
<script src="js/respond.min.js"/></script>
<![endif]-->
更好的方法用妮子脚本。
Modernizr.load({
test: Modernizr.mq(‘only all‘),
nope: ‘js/respond.min.js‘
});
Modernizr.load({
test: Modernizr.mq(‘only all‘),
yep: ‘js/pass.js‘,
nope: [‘js/respond.min.js‘, ‘fail-polyfill.js‘, ‘fail.css‘] ,
both: ‘js/for-all.js‘
});
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
