码迷,mamicode.com
首页 > 其他好文 > 详细

响应式布局设计

时间:2015-04-16 19:28:18      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:

响应式布局当今很流行的一个设计理念。什么是响应式布局?我的理解是根据不同大小的屏幕显示不同的页面布局。

 

响应式布局怎么设计?

一种比较简单的方法就是利用CSS3的Media Query来实现。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

 

CSS 语法:

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

 

例子:

方式一:外链式

<!-- 当屏幕≤480px时背景显示为红色 -->
<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-width:480px)">

 

方式二:内嵌式

<!-- 当屏幕大于480px时背景为黄色 -->
<style type="text/css">
@media screen and (min-width:480px){
body{background: yellow;}
}

 

响应式布局设计

标签:

原文地址:http://www.cnblogs.com/linyewei/p/4432668.html

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