RWD - HTML5 +CSS3

摘要:RWD - HTML5 +CSS3

HTML5 宣告

<!DOCTYPE html>

<meta charset="utf-8">

<style>

<script>

比以前宣告寫的還要少呢(支持HTML5)

 

區段元素

section 區段

nav 導覽區域

article 獨立內容

aside 定義其所處內容之外的內容,用以作為主內容的補充

hgroup 用以組合網頁或區段的標題

header 頁首

footer 頁尾

媒體群組元素

figure 用以定義圖表、照片或程式片斷

figcation 用以定義figure標籤的標題文字

<figure>

    <figcaption>xxxxxx</figcation>

</figure>

文字元素

time

ruby

mark

表單元素

input,增加好多type

現在可填

type= email  , date , datetime , datetime-local , month , week , time , range , color , url , search , tel , number

 

內嵌內容元素

Canvas

Video

embed

Audio

source

--------

HTML5真的增加不少(我還在以前的 HTML觀念,orz)

 

CSS3 增加

text-shadow 文字陰影效果

box-shadow 區塊陰影效果

border-radius 圓角效果

rgba 

-----------------------------------

<meta name="viewport" context="width=device-wdith"> (Viewport設定)

 

讀取處理舊版 IE的腳本程式

<!--[if lt IE 9]>

<script src="js/html5shiv.js"></script>

<![endif]-->

 

要能正確地使用Media Queries 功能,首先要先將 viewport設定好。

 

Reset CSS

http://html5doctor.com/html-5-reset-stylesheet/

https://code.google.com/p/html5resetcss/downloads/list

 

處理IE8前的版本js,css檔

https://github.com/aFarkas/html5shiv

https://code.google.com/p/css3-mediaqueries-js/

 

其它關鍵字

-webkit-min-device-pixel-ratio:1.5  (Android 裝置 1.5 , iphone4 或4s,高解析度的Android裝置,為2)

min-device-pixel-ratio:1.5  (Android 裝置 1.5 , iphone4 或4s,高解析度的Android裝置,為2)

-webkit-background-size:100px 100px;