Responsive Web Design

browser window default size: 1024×768 px

RWD: http://mediaqueri.es

HEX: 十六进制

一、响应式设计

1、border-radius

2、linear-gradient

background-color: #42c264;

http://demo.marcofolio.net/3d_animation_css3

3、media screen

创建媒体查询时，最常用的是设备的视口宽度（ width ）和屏幕宽度（ device-width ）

body {background-color: grey;}

@media screen and (max-width: 960px) {body {background-color: red;}}

@media screen and (max-width: 768px) {body {background-color: orange;}}

@media screen and (max-width: 550px) {body {background-color: yellow;}}

@media screen and (max-width: 320px) {body {background-color: green;}}

@import url("phone.css") screen and (max-width:360px);

CSS2 用media属性为样式表指定设备类型<link rel="stylesheet" type="text/css" media="screen" href="screen-style.css">

width ：视口宽度。

height ：视口高度。

device-width ：渲染表面的宽度（对我们来说，就是设备屏幕的宽度）。

device-height ：渲染表面的高度（对我们来说，就是设备屏幕的高度）。

orientation ：检查设备处于横向还是纵向。

aspect-ratio ：基于视口宽度和高度的宽高比。一个 16∶9 比例的显示屏可以这样定义 aspect-ratio: 16/9 。

device-aspect-ratio ：和 aspect-ratio 类似，基于设备渲染平面宽度和高度的宽高比。

color ：每种颜色的位数。例如 min-color: 16 会检测设备是否拥有 16位颜色。

color-index ：设备的颜色索引表中的颜色数。值必须是非负整数。

monochrome ：检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数，如monochrome: 2 。

resolution ：用来检测屏幕或打印机的分辨率，如 min-resolution: 300dpi 。还可以接受每厘米像素点数的度量值，如 min-resolution: 118dpcm 。

scan ：电视机的扫描方式，值可设为 progressive （逐行扫描）或 interlace （隔行扫描）。如 720p HD电视（720p的 p即表明是逐行扫描）匹配 scan: progressive ，而 1080i HD 电视（1080i中的 i表明是隔行扫描）匹配 scan: interlace 。

grid ：用来检测输出设备是网格设备还是位图设备。

把如下 JavaScript代码复制到每个需要自适应图片的网页的头部(紧跟title后)：<script type="text/javascript">document.cookie='resolution='+Math.maxscreen.width,screen.height)+'; path=/';</script>

自适应图片方案默认为此创建的目录是 assets 。

CSS 网格系统

Semantic (http://semantic.gs)；

Skeleton (http://getskeleton.com)；

Less Framework (http://lessframework.com)；

1140 CSS Grid (http://cssgrid.net)；

Columnal (http://www.columnal.com)。