第一章 HTML5,CSS3及響應式設計入門恢復

移動版站點<專門針對手機的網站>

手機APP<APPLICATION>   開發工具：Android\IOS

一，響應式設計好很差？

一個網站能夠根據屏幕大小進行改變佈局，樣式。

響應式設計是能在各類設備上良好顯示的設計。

二，響應式設計的定義

其餘名稱：流式佈局  彈性式佈局  自適應佈局

真正的響應式設計不單單是根據屏幕大小改變網頁佈局而是理念的轉變。

從先大屏設計爲小屏設計的理念到先小屏再大屏的轉變。

注意：響應式設計是針對任意設備對網頁內容進行完善佈局的現實機制。

三   響應式網頁設計測試

1，如何測試：

a 準備各類屏幕設備

b 經過插件將瀏覽器窗口設定爲指定像素（chrome windons resizer <插件名稱> firefox-resizeme）

c 直接拖動改變瀏覽器窗口大小能夠調試大多數的顯示效果

*視口，屏幕的區別

視口：顯示網頁內容的區域       視口寬，高：weight   height

屏幕：設備的屏幕大小          屏幕寬，高：divice-w   divice-h

2，幾個響應式的設計<blog.teamtree house.com>

四，HTML5  <H5>

1,   H5有一些新增的語義元素   <header>頭部   <nav>導航

2， H5擁有表單交互的功能，減小了大量JS代碼

3， 寫H5比 之前更簡潔

五，CSS爲響應式設計奠基基礎

1， 網頁佈局模式的轉變：<table>佈局——<div>css佈局——<div>css3佈局

2， www.csszenggarden.com  禪意花園

3， CSS特色：不破壞任何東西，若瀏覽器不支持則會自動忽略，不影響基本顯示

六， CSS3設計實現

1， 滑動門技術CSS2-CSS3擁有圓角設置的樣式

2， CSS3漸變背景的實現