響應式佈局設計

響應式佈局當今很流行的一個設計理念。什麼是響應式佈局？個人理解是根據不一樣大小的屏幕顯示不一樣的頁面佈局。

 

響應式佈局怎麼設計?

一種比較簡單的方法就是利用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;}
}