响应式布局

时间：2015-04-25 12:11:11 阅读：135 评论：0 收藏：0 [点我收藏+]

标签：

一、开发原则

1、移动优先，在设计初期，就要考虑页面如何在多终端显示

2、渐进增强，充分发挥硬件设备的最大功能

二、如何实现相应布局方法

1、css3-Media Query，最简单

2、借助原生javascript，成本高

3、开源框架，可以更好的支持多终端

三、CSS3-media Query

常见属性：

device-width,devic-height，根据屏幕宽高来做不同的展示

width,height，渲染窗口宽高

orientation，设备方向

resolution，设备分辨率

四、实际案例

css.css文件中写入

body{background-color:red;}

在head中引用css

<link rel="stylesheet" type="text/css" href="css.css" media="only screen and (max-width:480px)" />

media="only screen and (max-width:480px)"表示，当浏览器显示窗口宽度小于480px的时候，就引用css.css文件

直接在head，style中编写

@media screen and (min-width:480px){
 body{background-color:#ff00ff}
}

标签：

原文地址：http://www.cnblogs.com/Zjingwen/p/4455657.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行