码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-05-05 12:05:58      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!