iT邦幫忙

0

如何實現RWD?

請問各位大大,
我最近在做網站時發現一個問題,我想讓我的網站實現RWD(響應式),
但我做完小部分的網站內容後,分別用了電腦裡的開發者模式(行動裝置顯示模擬)和手機打開網站,用電腦模式看都好好的,但一移到手機,所有的東西都變得很小!
因為我是個新手,所以在不了解CSS的情況下,我的CSS單位都亂用,
幾乎用的都是px和%,但我並不知道這正不正確,當初也沒想到RWD。
請問各位大大有什麼建議嗎?

網站網址:https://inspi.cf

電腦模式:
https://ithelp.ithome.com.tw/upload/images/20210818/201405420Mi9COH2MY.png
電腦的開發者模式(行動裝置顯示模擬):
https://ithelp.ithome.com.tw/upload/images/20210818/20140542Vu4mPGby9e.png
手機模式:
https://ithelp.ithome.com.tw/upload/images/20210818/20140542G7z0u34g76.jpg

看更多先前的討論...收起先前的討論...
isaepfkeyr iT邦研究生 5 級 ‧ 2021-08-18 17:07:54 檢舉
先套bootstrap到你的網頁吧
請問怎麼套呢?
harry xie iT邦新手 1 級 ‧ 2021-08-18 20:01:37 檢舉
手機版的網頁文字、圖片都會比較小,正常
RWD 的教學網路上很多,最重要的觀念就是根據螢幕大小下中斷點,每個中斷點設定各自的 CSS
https://tw.alphacamp.co/blog/rwd-responsive-web-design-introduction
haward79 iT邦新手 3 級 ‧ 2021-08-19 10:01:06 檢舉
在你的 html 的 head 中加上
<meta name="viewport" content="width=device-width, initial-scale=1" />

看看有沒有改善吧!
幫樓主餵狗 https://www.google.com/search?q=RWD+單位
如果自己刻CSS難度大,那找一個前端框架來用會比較快
一般來說bootstrap 用的人很多,樓主可以參考看看
https://www.google.com/search?q=bootstrap
官網對每個版本都說明得很清楚,也有常用的 JQ 套件
如果要中文資訊,六角學院的翻譯版還算OK,但基本上就是官網右鍵翻譯而已
所以還是看官網會比較快,如果實作上有問題,可以直接餵狗,也能找到很多範例
大致上如此,給樓主參考
0
小魚
iT邦大師 1 級 ‧ 2021-08-18 18:52:21

就上網找一下RWD怎麼做,
或是bootstrap之類的也是可以達成.

6
frank575
iT邦新手 4 級 ‧ 2021-08-18 21:48:50

我寫了一個簡單的 demo 給你看,基本上我是不建議新手套 bootstrap 啦,除非你是寫後端的,迫不得已寫前端在用,對於前端開發來說寫個樣式比套 bootstrap 快數倍,而且才能與設計稿完美同步。

基本上關鍵就圍繞在一個 @media 語法,可以使用 max-width, min-width 來決定什麼視窗吃到什麼樣式,比方說:

// 當頁面大小 <= 768px 執行括號內的樣式
@media screen and (max-width: 768px) {}

// 當頁面大小 >= 768px 執行括號內的樣式
@media screen and (min-width: 768px) {}

// 當頁面大小 >= 320px 且 <= 768px 執行括號內的樣式
@media screen and (min-width: 320px) and (max-width: 768px) {}

// 比方說以下代碼就是當寬度 > 768px 時,html, body 背景色是白色,反之為紅色
html, body { background: white; }
@media screen and (max-width: 768px) {
  html, body { background: red; }
}

所以你只要在對應的地方寫樣式即可,我的 demo 是使用 scss 寫的,如果看不慣可以點擊該圖示的紅寬位置切換成 css 樣式看,我是建議可以使用這些預處理工具來寫樣式,代碼會更漂亮,寫起來也更輕鬆且更好組織代碼

看更多先前的回應...收起先前的回應...
ckp6250 iT邦好手 1 級 ‧ 2021-08-19 08:43:27 檢舉

講解簡單明瞭,一聽就懂,真是佛心。

frank575 iT邦新手 4 級 ‧ 2021-08-19 09:22:11 檢舉

哈哈沒這麼誇張啦

deh iT邦新手 1 級 ‧ 2021-08-19 10:33:39 檢舉

沒理解錯的話,就是對應寬度用指定的CSS,所以如果就分768以上與以下,就要寫兩分css吧?

frank575 iT邦新手 4 級 ‧ 2021-08-19 10:41:51 檢舉

是的,如果從大寫到小可以用 max-width, 反之用 min-width,這樣比較直覺

但通常寫 RWD 的話有技巧,雖然說是兩份但畫面沒有大改的話,其實 RWD 部分只有少量代碼而已

0
janlin002
iT邦新手 2 級 ‧ 2021-08-25 09:22:58

可以使用Bootstrap, Material UI或Ant-Design等相關套件
至於怎麼使用,可以去官網搜尋Layout或是Grid,就會有簡單的教學,以下提供網址給你參考:

Bootstrap Layout:
https://getbootstrap.com/docs/5.1/layout/grid/
Material UI:
https://material-ui.com/zh/components/grid/
Ant-Design:
https://ant.design/components/layout-cn/#header

我要發表回答

立即登入回答