製作網站不能沒有談到的功能 | rwd尺寸設定
過去開發網站時,為了配合桌上型電腦以及智慧型手機(含平板)螢幕尺寸與比例的不同,需要個別開發不同的網站,來優化如智慧型手機開啟網站時的呈現效果。而專門為手機製作的網站,稱為行動版網頁(mWeb)。舉例來說,一般的的網址可能是www.abc.com,而行動版網頁通常則為m.abc.com。 通常這樣類型的設計,必須特別設計一種機制,來判定使用者開啟網站的裝置類型,決定呈現一般網站或是行動版網頁。一但判定錯誤,就會有顯示走鐘的風險。且同樣的服務,必須同時維護兩個網址的內容,更增加了維運上的成本。(有碰過別人在Line上面傳...
過去開發網站時,為了配合桌上型電腦以及智慧型手機(含平板)螢幕尺寸與比例的不同,需要個別開發不同的網站,來優化如智慧型手機開啟網站時的呈現效果。而專門為手機製作的網站,稱為行動版網頁(mWeb)。舉例來說,一般的的網址可能是www.abc.com,而行動版網頁通常則為m.abc.com。
通常這樣類型的設計,必須特別設計一種機制,來判定使用者開啟網站的裝置類型,決定呈現一般網站或是行動版網頁。一但判定錯誤,就會有顯示走鐘的風險。且同樣的服務,必須同時維護兩個網址的內容,更增加了維運上的成本。
(有碰過別人在Line上面傳給你連結,用電腦打開比例大到很詭異嗎?那通常就是手機專門站喔!網址通常會是m.開頭,但其實沒有硬性規定。)
為了解決這種困擾,一站式設計的RWD響應式就此誕生。
RWD響應式設計全名為Responsive Web Design,也有人稱自應性設計,主要是透過CSS的技術,讓你的網站可以在不同解析度下,來改變網頁頁面的佈局以及排版,讓不同螢幕尺寸的設計,都可以正常瀏覽同一網站,來提供最佳化的使用者體驗。
CSS在正確設定的情況下可以知道頁面顯示的大小與判斷解析度,並且可以依照不同大小對特定的元件設定不一樣的大小顏色與排列順序。所以簡單來說RWD的網站其實不會發生不同大小下某個元件被移除的事,但是可以隱藏起來。
當然主要雖然是以CSS完成,但很多時候為了更優秀的使用者體驗或是特殊的行為,還是會用到JavaScript。不過同樣的行為在效能上面用CSS會比JavaScript效能好。
利用頁面大小判斷裝置的方式其實相當簡單,舉例說明,通常不同裝置對應到的解析度如下
電腦版裝置尺寸:1024px以上 平板裝置尺寸:768px ~ 1024px之間 手機裝置尺寸:768px以下
不過這是其中一種參考,如果是B...
取得本站獨家住宿推薦 15%OFF 訂房優惠
WINDOW RESIZER 模擬各種螢幕尺寸,RWD必備的擴充套件
WINDOW RESIZER─模擬各種螢幕尺寸,RWD必備的擴充套件 ... 針對某個機型做數值設定的話,WINDOW RESIZER也可以自己設定尺寸幫助設計師調整畫面。