Responsive Web Design
browser window default size: 1024×768 px

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比岱山網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式岱山網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋岱山地區(qū)。費用合理售后完善，十余年實體公司更值得信賴。

RWD: http://mediaqueri.es

HEX: 十六進制

一、響應式設(shè)計

1、border-radius
2、linear-gradient
background-color: #42c264;
background-image: -webkit-linear-gradient(#4fec50, #42c264);
background-image: -moz-linear-gradient(#4fec50, #42c264);
background-image: -o-linear-gradient(#4fec50, #42c264);
background-image: -ms-linear-gradient(#4fec50, #42c264);
background-image: -chrome-linear-gradient(#4fec50, #42c264);
background-image: linear-gradient(#4fec50, #42c264);

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

3、media screen
創(chuàng)建媒體查詢時，最常用的是設(shè)備的視口寬度（ 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屬性為樣式表指定設(shè)備類型
? width ：視口寬度。
? height ：視口高度。
? device-width ：渲染表面的寬度（對我們來說，就是設(shè)備屏幕的寬度）。
? device-height ：渲染表面的高度（對我們來說，就是設(shè)備屏幕的高度）。
? orientation ：檢查設(shè)備處于橫向還是縱向。
? aspect-ratio ：基于視口寬度和高度的寬高比。一個 16∶9 比例的顯示屏可以這樣
定義 aspect-ratio: 16/9 。
? device-aspect-ratio ：和 aspect-ratio 類似，基于設(shè)備渲染平面寬度和高度的
寬高比。
? color ：每種顏色的位數(shù)。例如 min-color: 16 會檢測設(shè)備是否擁有 16位顏色。
? color-index ：設(shè)備的顏色索引表中的顏色數(shù)。值必須是非負整數(shù)。
? monochrome ：檢測單色幀緩沖區(qū)中每像素所使用的位數(shù)。值必須是非負整數(shù)，如
monochrome: 2 。
? resolution ：用來檢測屏幕或打印機的分辨率，如 min-resolution: 300dpi 。還
可以接受每厘米像素點數(shù)的度量值，如 min-resolution: 118dpcm 。
? scan ：電視機的掃描方式，值可設(shè)為 progressive （逐行掃描）或 interlace （隔
行掃描）。如 720p HD電視（720p的 p即表明是逐行掃描）匹配 scan: progressive ，
而 1080i HD 電視（1080i中的 i表明是隔行掃描）匹配 scan: interlace 。
? grid ：用來檢測輸出設(shè)備是網(wǎng)格設(shè)備還是位圖設(shè)備。

把如下 JavaScript代碼復制到每個需要自適應圖片的網(wǎng)頁的頭部(緊跟title后)：

自適應圖片方案默認為此創(chuàng)建的目錄是 assets 。

CSS 網(wǎng)格系統(tǒng)
? Semantic (http://semantic.gs)；
? Skeleton (http://getskeleton.com)；
? Less Framework (http://lessframework.com)；
? 1140 CSS Grid (http://cssgrid.net)；
? Columnal (http://www.columnal.com)。