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‘
});

HTML5 and CSS3 实战经典教程，相应式设计

标签：

原文地址：http://www.cnblogs.com/recordlife/p/4478520.html