响应式布局设计

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

 

响应式布局怎么设计?

一种比较简单的方法就是利用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;}
}