[筆記]html5+css3 響應式設計(RWD,Responsive Web Design)

[筆記]html5+css3 響應式設計(RWD,Responsive Web Design)[概述+媒體查詢]
書名：<Web設計：HTML5和CSS3實戰>
一 概述
1. 爲了可以使「一個頁面,支持各類客戶端屏幕分辨率大小[pc,mobile,pad]」成爲可能，Ethan Marcotte提出了響應式網頁設計。
將3種已有的開發技巧【彈性網格佈局，彈性圖片，媒體和媒體查詢】整合後，命名爲【響應式網頁設計(流式設計，彈性佈局，塑料佈局，流體設計，自適應佈局，跨設備設計，彈性設計)】
2. 一句話歸納：針對【任意設備】對【網頁內容】進行【完美佈局】的一種顯示機制。
3. html5語義標籤和css3字體，動畫，變換等功能，給RWD提供了更多可能性
4. 再也不迷戀 【像素px】,使用相對度量單位【em或百分比】
5. 視口（ViewPort）：頁面實際顯示區域
屏幕尺寸：設備物理顯示區域
6. 【響應式網站】沒法替代真正的【移動網站】

二 媒體查詢
根據設備顯示器特性【視口寬度，屏幕比例，設備方向】設定css樣式
1. 使用
1-1) css文件：
@media screen and （max-width: 960px）{
body{
background-color: red;
}
}
1-2) <link>標籤：
<link rel="stylesheet" type="text/css" media="screen" href="xxx.css">
<link rel="stylesheet" type="text/css" media="screen and ( orientation: portrait) and (min-width: 800px), projection" href="xxx.css">
縱向的寬度大於800px的屏幕或投影儀的時候，加載xxx.css
1-3) css文件裏的import
@import url("xxx.css") screen and (max-width:360px); 會增長http請求，影響加載速度

2 可檢測特性
width[視口寬度],height[視口高度],device-width[屏幕寬度],device-height[屏幕高度],orientation[屏幕縱橫],aspect-ratio[視口寬高比16：9=16/9],device-aspect-ratio[屏幕寬高比],color[xx位色min-color: 16],color-index[設備顏色數，非負數],monochrome[單色緩衝區每一個像素使用位數],resolution[屏幕或打印機分辨率min-resolution:300dpi,118dpcm每釐米像素點],scan[電視機掃描progressive[逐行掃描，720p電視],interlace[隔行掃描1080iHD電視]],grid[設備是網格仍是位圖]
除orientation,scan和grid外，其餘能夠用min和max設定範圍

3 阻止移動瀏覽器自動調整頁面大小
viewport meta元素
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
縮放2倍，其餘屬性[maximum-scale,minimum-scale,user-scalable=no]

三 使用技巧
1 經過覆蓋式樣來響應不一樣的設備[先普通設備的css，後面纔是用響應特殊設備的css覆蓋前面的式樣]
2 若是將不一樣媒體查詢樣式放於不一樣css文件，會致使http請求太多，頁面加載變慢。
3 Respond.js[https://github.com/scottjehl/Respond ]用於兼容ie8等低版本支持媒體查詢的js工具。但目前沒法解析 @import 命令

----
[筆記]html5+css3 響應式設計(RWD,Responsive Web Design)[流動佈局+彈性圖片]

一. 【流式佈局】
爲了兼容將來可能出現的設備，爲了是媒體查詢斷點之間的顯示效果平滑流暢，須要靈活的【流動佈局】
百分比佈局方法王者歸來...
【百分比佈局】建立流動的彈性界面
【媒體查詢】限制元素的變更範圍
此兩者構成【響應式設計】的核心

1. 元素的【固定像素寬度】轉【百分比寬度】公式
目標元素寬度 / 上下文元素寬度 = 百分比寬度

2. 文字的用【em】替換【px】
公式【目標元素寬度 / 上下文元素寬度 = 百分比寬度】一樣適用
上下文文字元素默認大小爲16px
48px / 16px = 3em
【關鍵】是分清上下文元素
【注】行高的【上下文元素】是其自己的文字大小

二. 【彈性圖片】
1. 圖片縮放
刪除img的寬度和高度後，使用【img,object,video,embed{max-width(或width屬性): 100%;}】
【max-width】還能夠用於限制圖片或元素的最大px或最大百分比
【注】此法對於iframe內元素無效

2. 爲不一樣尺寸提供不一樣圖片
書中使用js插件
http://adaptive-images.com
若是是css能夠設置的圖片，能夠經過【媒體查詢】

3. CSS網格系統
響應式設計css框架
Semantic
Skeleton
Less Framework
1140 CSS Grid
Columnal 做者推薦[使用960.gs框架(固定寬度網格系統)相似的CSS命名]

使用網格系統能夠快速搭建網站
----

[筆記]html5+css3 響應式設計(RWD,Responsive Web Design)[HTML5+CSS3]

一 html5

1. html5兼容問題
可使用html5樣板文件
http://html5boilerplate.com
包含了normalize.css,polyfill，Modernizr等

2. 關於html W3School裏有很詳細的教程能夠參考
主要特性：
語義化標籤
多媒體，video，audio
離線存儲 .manifest
畫板canvas

3. 提到【無障礙網頁應用技術】

4. video 響應式方法
tab中去除width,height屬性
css中加入max-width:100%;height:auto;
對於iframe的視頻，使用jquery插件FitVids

二 CSS3
CSS3能夠實現各類效果：
圓角，背景漸變，文字陰影，盒陰影，自定義字體，多重背景圖片，動畫，平移，2/3D旋轉等等
具體能夠從W3CSchool裏查詢

但對舊版本瀏覽器的兼容性還存在不少問題，可使用js進行必定程度的彌補

技巧：可快速編輯css3私有前綴[-webkit,-ms等]
js工具：-prefix-free

經常使用css3響應式設計

1. CSS3多欄佈局
column-width: 12em;
column-count: 4;
column-gap: 2em;
column-rule: thin dotted #999;

2. CSS3長文字換行[url地址等無空格內容]
word-wrap: break-word;

3. CSS3選擇器[字符串匹配屬性選擇器,有點像正則表達式，與jquery選擇器也差很少]
以特定前綴開頭；
Element[attribute^="value"]{}
包含特定字符串；
Element[attribute*="value"]{}
以特定後綴結尾；
Element[attribute$="value"]{}
也能夠直接用等於
Element[attribute="value"]{}

4. CSS3結構僞類
css2：
li:first-child
css3:
li:last-child

nth-child選擇器原來處理交替樣式
：nth-child(even) 或者 odd表示奇偶
還有
:nth-child(n),:nth-last-child(n),:nth-of-type(n),:nth-last-of-type(n)
n:整數[2]，表達式nth-child(3n+1),nth-last-child(-n+3)(-n:表方向)
【注】CSS3計數從1開始

否認(:not)選擇器
nav ul li:not(.internal) a{...}

css3僞元素修正
css2:
p:first-line
p:first-letter
css3:
p::first-line
p::first-letter

5. 自定義網頁字體
@font-face
字體格式：EOT/TTF/WOFF
例：
@font-face{
font-family: 'xxxx111';
src: url('xxx/xxx.eot');
src: url('xxx/xxx.eot?#iefix') format('embedded-opentype'),
url('xxx.woff') format('woff'),
url('xxx.ttf') format('truetype'),
url('xxx.svg#xxx') format('svg');
font-weight: normal;
font-style: normal;
}
在須要的地方使用該font-face定義的font-family名字：xxxx111
font-family: 'xxxx111';
【注】若是字體模糊，須要覆蓋瀏覽器默認的font-weight:700屬性，改成400左右
【缺點】字體文件太大

6. CSS3顏色格式和透明度

.RGB顏色
color: rgb(red,green,blue);

.HSL顏色
HSL(色相，飽和度，亮度)
color: hls(359,99%,50%);
【注】最好給IE6,7,8留下16進製備用顏色
color: #fe0208;
color: hls(359,99%,50%);

.透明通道
hsl和rgb支持透明通道
background-colro: hsla(0,0%,100%,0.8);
background-colro: rgba(255,255,255,0.8);
【注】
opacity 會對整個元素形成透明
透明通道 只會對元素部分形成透明

7. 文字陰影，盒陰影，漸變，多重背景
text-shadow[能夠用逗號，實現多重陰影]
box-shadow[內陰影(inset);能夠用逗號，實現多重陰影]
linear-gradient(90deg, #fff 0%, #e4e4e4 50%, #fff 100%)
徑向背景漸變
linear-gradient(center,ellipse cover, #fff 72%, #ddd 100%)
重複漸變
repeating-linear-gradient(...)
還能夠用於background背景圖片
多個背景圖片，背景圖片大小[background-size]，位置等

W3CSchool裏有更爲詳細內容，此處沒有多大意義

8. 可縮放圖標
@font-face圖標
即：字體圖片放於精靈圖片中，經過font-face進行識別調用
因爲使用的是字體，因此能夠縮放
http://fico.lensco.be/

9. CSS3過分，變形，動畫
CSS3的教程，不應出如今這個【響應式設計】裏呀
W3CSchool裏有更爲詳細內容，此處沒有多大意義

下面過分語句彷佛會比較好玩
*{
transition: all 1s;
}
----

[筆記]html5+css3 響應式設計(RWD,Responsive Web Design)[HTML5+CSS3 表單]

沒有什麼大的東西，就是在說html5的表單新特性。
如：【自動完成功能】，【表單控件檢查】，【新控件類型】，【正則表達式檢查】，【新屬性】等
而後就是對於舊瀏覽器的 兼容腳本【Webshims Lib】，【Modernizr】等
最後是使用CSS3美化html5表單

不過有一點須要注意的，這些html5表單，在不一樣設備上的顯示方法是不一樣的，自己就自帶了必定程度的【響應式設計】

1. css3對於html5表單的僞類選擇器
input:required 必填域
input:focus:invalid 當前聚焦且含非法輸入域
input:focus:valid 當前聚焦且含合法輸入域

----

[筆記]html5+css3 響應式設計(RWD,Responsive Web Design)[最後一章：跨瀏覽器問題]

1. 【漸進加強】與【優雅降級】
【優雅降級】：爲了舊瀏覽器，主動去除不支持的新特性
【漸進加強】：爲先進的瀏覽器提供新特性支持

2. 前端的瑞士軍刀【Modernizr】
下面書中例舉了【Modernizr】的用處和用法
輔助修正式樣
兼容html5標籤
支持媒體查詢
按需加載資源
等等。
差很少就結束了

關鍵總結：響應式設計三大要素：【媒體查詢】，【流式佈局】，【彈性圖片】錦上添花：Html5，CSS3