響應式頁面只能用Bootstrap 3製作嗎? 不,但它最方便! | javascript響應式網頁
在這手機的當道的時代,讓你的網站外觀同時符合桌機、筆電、平板以及手機已經是基本常識。MobileFriendly(手機友好)已經是各大搜尋網站,尤其是Google,永遠的SEO重點項目。 當然影響SEO的原因還有很多,而且各家一直偷偷改變不完全公開透明,但就目前來看,除非VR虛擬實境眼鏡與AR混合實境大量普及並使用到網站。不然MobileFriendly永遠都會是在SEO中佔不少的份量。 順便附上Google的測試網址[1]。(SEO=SearchEngineOptimization=搜尋引擎優化,當SEO越高,網站搜尋結果會越前面,曝光度越高。Wiki[2]) 那什麼是同時符合各裝置呢?...
在這手機的當道的時代,讓你的網站外觀同時符合桌機、筆電、平板以及手機已經是基本常識。
Mobile Friendly(手機友好)已經是各大搜尋網站,尤其是Google,永遠的SEO重點項目。
當然影響SEO的原因還有很多,而且各家一直偷偷改變不完全公開透明,但就目前來看,除非VR虛擬實境眼鏡與AR混合實境大量普及並使用到網站。不然Mobile Friendly永遠都會是在SEO中佔不少的份量。
順便附上Google的測試網址[1]。
(SEO = Search Engine Optimization = 搜尋引擎優化,當SEO越高,網站搜尋結果會越前面,曝光度越高。Wiki[2])
那什麼是同時符合各裝置呢?
這要怎麼實現?
這兩個可能會是我們比較在意的問題。
以前的話,為了多個不同的裝置,可能會建立完全不同的網站。
而現在不流行這樣做,這幾年的做法都是透過CSS手法,讓網頁的編排在不同的裝置大小呈現不同的樣式。通常就算利用桌機的網頁視窗放大縮小就可以看得到成果。各位不妨直接使用進度條的網站來試試看。
不過這邊要跟大家說,很可惜的,進度條並不是使用Bootstrap 3[3],而是使用Material Design Lite[4]。
但如果小編這邊建議,如果對JavaScript、CSS與響應式頁面沒有一定的熟悉度。最好不要直接在專案上使用Material Design Lite[5],絕對會後悔。
(進度條是有評估過後才做決定的,當然評估時也已經了解到一定的程度。)
再繼續下去之前,這裡要先提到一個概念。一般來說,如果想要做到類似動畫的行為,有兩種方式:
一種是用JavaScript 動態的去變更CSS的值。
第二種是用CSS以及CSS3的一些參數去產生類似的功能。
最簡單的比較就是,如果滑鼠滑上去按鈕要會變...