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

web相应式布局一些经验之谈

时间:2016-08-25 23:58:49      阅读:460      评论:0      收藏:0      [点我收藏+]

标签:

响应式布局常用技术

第一步:meta标签的应用。


<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

第二步:使用media-queries.js 或 respond.js 。

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

 

第三步:html结构

 

第四步:Media Queries

980px布局实例:

 

650px

 

 

480px移动设备

 

图片布局

 

媒体设备布局

 

Iphone布局

 

兼容性布局

 

560px布局

 

CSS中的Media Query(媒介查询)

3、语法结构及用法

  @media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}

 

 

 

 

 

 

可用设备参数

 

响应式布局实例地址

http://www.educity.cn/jianzhan/403677.html

http://www.cnblogs.com/lhb25/archive/2012/12/04/css3-media-queries.html

http://www.poluoluo.com/jzxy/201206/166577.html

 

web相应式布局一些经验之谈

标签:

原文地址:http://www.cnblogs.com/jingweitianhai/p/5808674.html

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