摘要: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;