主流瀏覽器有5種：IE、chrome、firefox、safari、opera.
瀏覽器兼容
瀏覽器私有前綴
- -moz- 火狐瀏覽器
- -webkit- 360、蘋果、獵豹、搜狗、QQ、 Chrome等瀏覽器
- -o- Opera/歐朋瀏覽器
- -ms- IE、百度等瀏覽器
跨瀏覽器的默認樣式
- Normalize.css 是替代 Reset.css，保護有用的瀏覽器默認樣式，修改瀏覽器自身BUG，優化CSS的可用性，它是模塊化的，擁有詳細的文檔。它從IE8開始支持。
<link rel="stylesheet" href="http://cdn.staticfile.org/normalize/3.0.1/normalize.min.css" type="text/css" />
- Reset.css 移除瀏覽器的默認樣式，然后再根據需要把樣式再加回來。
React.js 在瀏覽器中的兼容情況
- 從 React v15 開始，React DOM 將不會再支持 IE8 了。而中國還有超過 18% 的人在使用 IE8。使用仍然支持 IE8 的 React v0.14 。
- 我們現在使用的版本是 v0.14.6，不支持IE8，支持IE10/11、Egde。火狐、搜狗、360、IE11都有不同程度的兼容問題。
Css3 在瀏覽器中的兼容問題
- Caniuse.com/#home 查詢css3樣式在瀏覽器中的兼容情況
- Css3在Ie中支持不友好，需要在html中加載 ie-css3.htc
常用css內 hack 瀏覽器兼容寫法，這次portal的兼容我使用的是選擇器的前綴法，條件注釋IE10不支持了且條件注釋里的代碼是不僅僅對css有效，其它兼容問題也可以使用條件注釋方法，portal的兼容只有css的樣式有問題
- -ms- ： @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){ … }
- -webkit-： @media screen and (-webkit-min-device-pixel-ratio:0){ … }
- -moz-：@-moz-document url-prefix() { … }
使用虛擬機 VM VirtualBox
- 下載地址：http://soft.huweishen.com/soft/238.html
- 安裝教程：http://tech.huweishen.com/gongju/1544.html
響應式布局
響應式布局方法
- 百分比布局
- bootstrap柵格系統
- Flex 伸縮盒布局
- 媒體查詢
Porttal里面用了媒體查詢，效果不好，因為側邊欄定寬，導致兩欄有交叉，還要再研究。
綜合：流式布局和彈性布局及配合媒體查詢 是 響應性布局的最好方式。
媒體查詢方法：
- 屏幕使用screen;設備使用print;手機設備使用device-width
- Window.screen 命令包含顯示設備的信息
- Screen.height / screen.width 兩個命令，用來了解設備的分辨率
Head標簽中需要引入：
- <meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no” />
具體含義如下：
- Width: 控制viewport的大小。如device-width為設備的寬度。
- Height: 和width相對應，指定高度。
- initial-scale: 初始縮放比例，頁面第一次加載時的縮放比例。
- maximum-scale 允許用戶縮放到的最大比例，范圍從0到10.0
- minimum-scale: 允許用戶縮放到的最小比例，范圍從0到10.0
- user-scalable： 用戶是否可以手動縮放，值可以是: yes,ture 可以縮放；no,false 不可以縮放；
字體自適應：
- 給根元素html,body設置基本字體，單位vw:
html { font-size: calc(112.5% + 4 * (100vw - 600px) / 400); }
- 或用JS根據屏幕寬度計算字體大小：
(function (doc, win) {
vardocEl=doc.documentElement,
resizeEvt='orientationchange'inwindow?'orientationchange':'resize',
recalc=function(){
varclientWidth=docEl.clientWidth;
if(!clientWidth)return;
docEl.style.fontSize=20*(clientWidth/320)+'px'; };
if(!doc.addEventListener)return;
win.addEventListener(resizeEvt,recalc,false);
doc.addEventListener('DOMContentLoaded',recalc,false);})(document,window);
在以前，如果我們想同一個網站對不同設備（比如PC端，手機端，平板端等等）提供支持，一般性的做法是針對不同的設備額外實現一套頁面，在web端判斷出訪問設備類型時再路由到不同的實現。
這種做法的弊端很明顯，因為額外的實現，所以后續的更新及維護都比較繁瑣且成本越來越高。那么我們有沒有一種方法，就是只有一份實現但是可以根據不同的設備自動做展現上的調整。Media Query為這種思路的實現提供了支持。
@media screen and (min-width: 961px) and (max-width: 1200px) {
p {
color: pink;
}
}
上面代碼的含義是指，當展現頁面的寬度大於960px且小於1200px時，將p標簽的字體顏色設置為粉色。
自適應（響應式）網頁設計
我們可以使用CSS3的Media Query做一些自適應的網頁設計。比如，
<head>
<link rel="stylesheet" media="screen and (max-width: 480px)" href="tiny.css" />
<link rel="stylesheet" media="screen and (min-width: 481px) and (max-width: 600px)" href="small.css" />
<link rel="stylesheet" media="screen and (min-width: 601px) and (max-width: 960px)" href="middle.css" />
<link rel="stylesheet" media="screen and (min-width: 961px)" href="pc.css" />
</head>
減少css文件的解析，將所有的媒體查詢代碼寫在同一個css文件中
<head>
<link rel="stylesheet" href="style.css" />
</head>
/*以下為css*/
@media screen and (max-width: 480px) {
/* your css code */
}
@media screen and (min-width: 481px) and (max-width: 600px) {
/* your css code */
}
/* more css code */
以下是功能性示例網站：
- 不同的屏幕大小將導致頁面的側欄發生變化： http://hicksdesign.co.uk/
- 不同的屏幕大小將導致頁面導航欄和圖片行數發生變化：http://alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
- 不同的屏幕大小將導致頁面圖片的分列不同：http://colly.com/
- 七牛后台官網，使用flex布局，不同屏幕變化，整體布局自適應： https://portal.qiniu.com/signin
所謂的自適應布局遠遠沒有這么簡單，並不是靠着在不同屏幕大小上對頁面布局做一些調整就可以了。
它還將面臨下面的幾個問題，
- 不同屏幕尺寸下，圖片（視頻）等資源的展示如何處理
- 在較小的屏幕尺寸下，往往需要對一些元素進行隱藏，這勢必會造成流量（帶寬資源）的浪費
- 即使一套頁面可以自適應好幾種設備了，此時一旦有更新，需要同時維護各個設備相關的css代碼並且要做好協調
關於Media Query瀏覽器的兼容性，除了IE8及其以下的瀏覽器不支持，其他的主流瀏覽器基本上都支持
一些PC端的媒體查詢斷點，斷點，斷點，重要的事情說三遍：
百度分辨率使用情況查詢，可以查詢網民地域分布，瀏覽器市場等，主要是可以查詢哪種分辨率使用人數最多：http://tongji.baidu.com/data/screen
/* 無論pc和手機都會顯示響應式，不滿足要求 （736px為iPhone6 plus橫屏渲染寬度，但在pc上瀏覽器縮小到736px時也有效）*/
@media screen and (max-width: 736px) { }
/*pc上也會顯示給手機做的響應式，不滿足要求 （添加設備寬）*/
@media screen and (max-width: 736px) and (max-device-width: 1920px) { }
/* pc chrome瀏覽器拖動寬高為400*800時(max-width: 414px) and (orientation:portrait)有效，不符合要求； 再拖動寬高為600*500時，screen and (max-width: 736px) and (orientation:landscape)有效，不符合要求。 */
@media screen and (max-width: 414px) and (orientation:portrait), screen and (max-width: 736px) and (orientation:landscape) { }
/* 加上更加嚴格的橫豎屏狀態 portrait豎屏 —— landscape橫屏 */
@media screen and (max-width: 414px) and (max-device-width: 1080px) and (orientation:portrait),
screen and (max-width: 736px) and (max-device-width: 1920px) and (orientation:landscape) { }
/* 最后一版，bug出現 MacBook pro(1280 * 800 2倍屏上*/
@media screen and (max-width: 736px) and (max-device-width: 736px),
screen and (max-width: 736px) and (-webkit-min-device-pixel-ratio: 2.0) { }
斷點的另一種理解：特定的瀏覽器寬度下，頁面元素出現效果不佳時添加斷點。
問題1：屏幕變寬，頁面中可能會出現過多空白區域。應當調節元素寬度或者設置其他方式自動來補充頁面留白.
問題2：寫死高度可能使內容超出模塊范圍，出現截取或者錯版的問題。
問題3：浮動容易導致錯版。
問題5：按鈕、圖片使用一致的對齊方式。
知名互聯網公司 移動端字體大小
| 類型 | 基准字體 | 字體區間 |
|---|---|---|
| 國外官網類 | 18~16px | 大字體 ≈30px 標題字體 22px~18px正文字體 18~14px底部最小字體 14~12px |
| 網購類 | 14~12px | 標題 16px正文 14~12px底部最小字體 12px |
| 國內媒體類 | 16px | 標題 22px~18px正文 18~16px附加信息 12px底部最小字體 12px |
行高為 1.3、1.35、1.45、1.5
參考鏈接：
http://www.w3ctech.com/topic/874
http://blog.gejiawen.com/2015/05/18/css3-media-query-and-responsive-design/