HTML5 / CSS3 – NAVIGATION自我疑惑和解答

pc的螢幕寬度，一般都在1000像素以上（目前主流寬度是1366×768），有的還達到了2000像素。手機的螢幕比較小，寬度通常在600像素以下。是以現在，要在大小迥異的螢幕上，都呈現出滿意的效果，并不是一件容易的事。

即使專業地接觸前端已經一年半了，在這個問題上我開始一直被困擾着。通過這次，很想能夠尋找出一個答案。

觀察過很多個網站，是采用不同的裝置用不同的網頁代碼，但是這樣維護起來就相當于要維護好幾個網站。如果一次性做出來，不是更省心嗎？

下面，說幾種我找到的解決方法：

(1)寬度：使用%取代px等方式定義寬度

(2)字型：使用em取代px

(3)定位：多使用靈活的浮動float

(4)圖檔：采用max-width和%形式來顯示，這樣就可以自己适應螢幕的大小了。

暫時了解為定位整個頁面，防止有意想不到的問題。

但是暫時沒有碰到過因為不加而産生的問題，我也沒有辦法通過實際去了解。希望各位有經驗的大神指點一下。

其實網絡上有很多種相容各種浏覽器的方法，特别是ie6\ie7\ie8的。但是各個浏覽器的相容效果始終是有所差異的，如果都要相容起來，恐怕是一門大學問。

我們可以在最基礎上提前預防。

但是很多時候，都是根據碰見了哪個問題，再針對問題進行一一解決。我個人比較贊同這種方式，因為有些為了相容性而寫的代碼，如果有效性不夠高，可能會限制到正常寫代碼的效果。

标簽是 html 5 中的新标簽。

主流浏覽器效果：在ie6/ie7/ie8上并不能識别，需要進行javascript處理。是以，為了保證相容，還是要在其内部寫一個

。

類似的html5的新标簽彙總：

定義頁面或區段的頭部；

定義頁面或區段的尾部；

定義頁面或區段的導航區域；

頁面的邏輯區域或内容組合；

定義正文或一篇完整的内容；

定義補充或相關内容；

生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。

元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。

生成相對定位的元素，相對于其正常位置進行定位。

是以，”left:20″ 會向元素的 left 位置添加 20 像素。

的作用效果？

display 屬性規定元素應該生成的框的類型。

display:inline;的作用：使段落生出行内框。對于

來說，使它們在同一行。

針對不同浏覽器，css有一些字首，如：

chrome：-webkit-（最新版的chrome已經沒有采用webkit核心了，但是safari一直是采用的webkit，并且幾乎所有的移動浏覽器都使用webkit） 

firefox：-moz-（ firefox 3.6 – firefox 15需要加 ） 

ie：-ms-（沒有必要添加，因為從來沒有一個穩定的ie支援） 

opera：-o-（低于opera 12.10的版本，可不加）

為什麼要加這些字首呢？

浏覽器使用字首來嘗試一些新屬性、值和選擇器，即便它們還沒有最終定稿——這是一個好的測試方法，在必要時也可以對它們進行修正或者重新定義。如果浏覽器一上來就直接使用标準屬性，那它們就會被直接鎖定在這個特性的實作上而不易變更。

visibility：元素是否可見。

浏覽器情況：所有主流浏覽器都支援 visibility 屬性。

值的使用方法：

(1)visible:預設值。元素是可見的。

(2)hidden:元素是不可見的。

顯示為：»

這是一個值得研究的問題，今天好困- -先睡覺了哦~下次專門發篇文章解決這個問題，會給連結位址的。