頁面設計筆記

最近兩週寫了幾個頁面，雖然看起來很簡單，可是也考慮到了IE8的兼容性、不一樣屏幕尺寸的適配性以及其它的一些方面，因此也算是小有收穫。下面就把寫代碼過程當中遇到的各類問題和解決方案記錄下來。

---

head區域的要點

瀏覽器渲染模式X-UA-Compatible

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

這一句是指IE系列瀏覽器以其最高版本運行，而不是兼容模式；同時讓安裝了Chrome Frame的瀏覽器開啓Chrome Frame的渲染模式。
IE=edge這一句對低於11的IE都有效，IE11則默認開啓此選項。若是寫成IE=9; IE=8; IE=7這種形式，則各版本IE均以自身版本的模式運行，而不是向下兼容。就實際應用而言，建議仍是採用IE=edge這種形式。

參考連接：
Is it still valid to use IE=edge,chrome=1?
「X-UA-Compatible」 content=「IE=9; IE=8; IE=7; IE=EDGE」

視口viewport

移動端瀏覽器爲了保證PC端頁面可以正常顯示，在一個虛擬的「窗口」（viewport）中渲染頁面，viewport一般是比頁面要寬的，這樣才能保證整個頁面都顯示在移動端瀏覽器中。在移動端瀏覽器裏面，用戶縮放查看頁面時，頁面總體佈局是不變的。

通常來講，爲了保證頁面能在移動端瀏覽器裏面正常顯示，都會加上下面這麼一行。

<meta name="viewport" content="width=device-width, initial-scale=1">

上面這一行中，width屬性設置視口的寬度等於設備的寬度，按CSS像素來講的話，就是100%的比例。這樣設置了以後，頁面在寬度這個方向上的全部內容就完整展現在瀏覽器中了。initial-scale屬性設置頁面初次加載完成後的縮放級別爲1，這個就沒什麼可說的了。至因而否要加上禁止用戶縮放的user-scalable=0，就見仁見智了。

iPhone和一部分安卓設備的屏幕尺寸爲3~4英寸（7~10釐米），物理像素爲320~480（大約是160dpi）。對web開發者來講，手機在豎直狀態下的寬度就是320px，開發者就能夠根據這個尺寸來設計網頁，可是還要考慮手機在水平狀態時的頁面效果，以及iPad和安卓平板上的頁面效果。

在160dpi下設計的頁面，在240dpi的屏幕中，設置了initial-scale=1屬性以後，頁面會縮放至原始大小的150%。文本天然會更加清晰、銳利，可是位圖就可能會變模糊了，那麼爲了保證在這兩種dpi下都有很好的顯示效果，就須要按照最終尺寸的150%（或者200%，若是還要考慮retina屏320dpi的蘋果設備的話）來設計頁面了，並經過CSS或者視口來根據設備實際狀況對頁面進行合理縮放。

參考連接：
Using the viewport meta tag to control layout on mobile browsers
移動前端開發之viewport的深刻理解

Normalize.css

爲何要用normalize.css而不是css reset？官網上總結了如下幾點：

1. 保留有用的瀏覽器默認樣式；

2. 將一大批HTML元素的樣式進行規範化；

3. 修正瀏覽器的bug並保證各瀏覽器的一致性；

4. 經過細微的改進，來提高可用性；

5. 在代碼中用註釋和詳盡的文檔加以解釋，讓開發者知其因此然。

除此以外，normalize.css還支持IE8及更高的版本，和本身的開發需求也是相符的。

IE兼容性相關

To be continued...