PTT數位生活區 / Web_Design

[討論] 前端 responsive 全部使用 vw 來做

看板Web_Design作者 (newyellow)時間5年前 (2019/08/29 01:05), 5年前編輯推噓9(9推 0噓 14→)
留言23則, 8人參與, 5年前最新討論串1/1
做專題網站時，通常都由設計師先設計版面 (對方不懂切版) 但常因為解析度不同，版面容易會跑掉 但設計師希望看起來都能維持原比例 通常的 responsive 解法就是做好幾種版面，再用 media 的方式去呼叫 但這樣有時候要切很多種 ... 相當麻煩 突然想到，如果網站的所有元素都用 vw 來定義的話，好像就解決了? 甚至連 padding、margin、font-size，通通都用 vw 來指定大小 這樣不管怎麼樣縮放，都可以維持原先設計的樣貌 當然某些真的差太多的狀況，例如手機，還是需要另外設計一種版面 但似乎就不用特地針對 1280、1440、1920 等解析度另外切版 只要切桌機、手機，兩種版本就好 好奇想請教，像這樣全部都用 vw 的設計，會有什麼問題嗎? 還是說其實業界早就已經很常這樣做了呢? (剛剛以 everything scale with vw 查 google 好像沒看到XD) -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 59.127.173.39 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1567011945.A.1C9.html
推
08/29 01:43, 5年前 , 1F
我現在習慣用 vmin 切直版跟橫版
08/29 01:43, 1F
喔喔感謝 從來不知道有 vmin! 好像很有趣 (其實我大部分都不是做前端 昨天是幫一個朋友 debug 突發奇想) 不過剛想了一下 vmin 的話 不是會因為使用者直放橫放 導致整個版面變形嗎 好奇正確的用法是什麼
推
08/29 01:47, 5年前 , 2F
可以實際做一個然後自己用手機和電腦看看就知道了 XD
08/29 01:47, 2F
其實我覺得跟需求也有點關係 這種因為是網站專題 才會那麼強調不要變形
推
08/29 07:30, 5年前 , 3F
你還是要切幾個view point，手機版的直式介面，你用電腦版
08/29 07:30, 3F
→
08/29 07:30, 5年前 , 4F
的去做，到時候不就小得不能看？
08/29 07:30, 4F
→
08/29 07:31, 5年前 , 5F
然後vw也有相容性問題，雖然已經9102年了，還是有人在用ie
08/29 07:31, 5F
→
08/29 07:31, 5年前 , 6F
的
08/29 07:31, 6F
天啊 2019 年還要考慮到 IE 的話 ... (暈 是說確實只切一個版不夠用，但感覺好像就可以只切兩個就好
推
08/29 13:44, 5年前 , 7F
vw IE最低支援9、斷點下好再使用、建議使用sass之類預處理
08/29 13:44, 7F
→
08/29 13:46, 5年前 , 8F
例如希望div寬度在750px以下裝置都維持畫面50%可以這樣寫：
08/29 13:46, 8F
→
08/29 13:47, 5年前 , 9F
width: 375/750*100vw 所以強烈建議使用CSS預處理器
08/29 13:47, 9F
感謝! 又學了一招 ※ 編輯: newyellow (59.127.173.39 臺灣), 08/29/2019 18:45:07 另外補充一個全部元素都用 vw 指定的優點 (包含 font-size) 就是字型大小不會亂跑 因為我朋友的主管 他的電腦習慣設定放大字元 (150% 之類的) 所以朋友每次做完專題 拿去給主管看 版面一定會跑掉 (字凸出去之類的) 用了 vw 就不會有這個煩惱了 (但對於視力不佳的人可能就不太方便) ※ 編輯: newyellow (59.127.173.39 臺灣), 08/29/2019 18:48:03
推
08/29 19:36, 5年前 , 10F
這樣跟設一個全寬的div再用width: %設定有什麼不同？
08/29 19:36, 10F
→
08/29 19:37, 5年前 , 11F
csss計算可以用calc試試
08/29 19:37, 11F
推
08/30 13:45, 5年前 , 12F
%參考的會是父層容器 vw, vh參考則固定是裝置寬度
08/30 13:45, 12F
→
08/30 13:49, 5年前 , 13F
平板跟手機版設計稿共用時，我喜歡大量使用vw 像是：
08/30 13:49, 13F
→
08/30 13:51, 5年前 , 14F
font-size: 24/750*100vw;750寬 字級24px，往下等比縮小
08/30 13:51, 14F
→
08/30 13:52, 5年前 , 15F
到了375寬 字級12px
08/30 13:52, 15F
推
08/31 20:21, 5年前 , 16F
推個 tailwindcss
08/31 20:21, 16F
推
09/08 19:56, 5年前 , 17F
我真的有一個要開在 LINE 內的 Web App 全用 vw 去做
09/08 19:56, 17F
→
09/08 19:57, 5年前 , 18F
其實還滿方便的，真的好用....效果也如預期
09/08 19:57, 18F
→
09/08 19:58, 5年前 , 19F
但有個重點是我知道那不是一般 RWD 而是只開在直立型手機裝
09/08 19:58, 19F
→
09/08 19:58, 5年前 , 20F
置上用的 Web App 才敢用 vw，它在電腦上效果很糟糕
09/08 19:58, 20F
→
09/08 19:58, 5年前 , 21F
因為橫式螢幕會吃掉太多用 vw去定義出來的 height
09/08 19:58, 21F
→
09/08 19:59, 5年前 , 22F
所以我只用在確保一定是直立開啟的 LINE webview 上
09/08 19:59, 22F
推
09/21 18:11, 5年前 , 23F
建議字體還是以（rem,em,%）為主
09/21 18:11, 23F
‣ 更多 newyellow 的文章
文章代碼(AID): #1TPhHf79 (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 newyellow 的文章
文章代碼(AID): #1TPhHf79 (Web_Design)