RWD網站教學!一起來學學吧!Part1!

後台網頁設計 RWD網頁設計 網頁設計推薦

用純 CSS 開發 RWD 網頁

首先不管你要用純 CSS 還是 CSS framework 開發,都要先加一下這一行

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”>

加這一行的目的是要強迫網頁的內容,以裝置目前的寬度來做呈現

以下示範加與不加的效果

假設有一張圖在電腦版上看到是這樣 (下圖)

擷取

如果不加下面這行

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”>

直接用手機瀏覽 (模擬iphone 6),就會變這樣…..擺明了把自己當桌上型

擷取

加了剛剛那行之後就會變成這樣

擷取

關於 ViewPort 的一些說明可以參考一下這個

https://developers.google.com/speed/docs/insights/ConfigureViewport

網動廣告科技

參考資料:http://sweeteason.pixnet.net/blog/post/42130394#c0