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

作者: newyellow (newyellow)   2019-08-29 01:05:43
做專題網站時,通常都由設計師先設計版面 (對方不懂切版)
但常因為解析度不同,版面容易會跑掉
但設計師希望看起來都能維持原比例
通常的 responsive 解法就是做好幾種版面,再用 media 的方式去呼叫
但這樣有時候要切很多種 ... 相當麻煩
突然想到,如果網站的所有元素都用 vw 來定義的話,好像就解決了?
甚至連 padding、margin、font-size,通通都用 vw 來指定大小
這樣不管怎麼樣縮放,都可以維持原先設計的樣貌
當然某些真的差太多的狀況,例如手機,還是需要另外設計一種版面
但似乎就不用特地針對 1280、1440、1920 等解析度另外切版
只要切桌機、手機,兩種版本就好
好奇想請教,像這樣全部都用 vw 的設計,會有什麼問題嗎?
還是說其實業界早就已經很常這樣做了呢?
(剛剛以 everything scale with vw 查 google 好像沒看到XD)
作者: prouno (QQ)   2019-08-29 01:43:00
我現在習慣用 vmin 切直版跟橫版
作者: VdustR (京)   2019-08-29 01:47:00
可以實際做一個然後自己用手機和電腦看看就知道了 XD
作者: froce (froce)   2019-08-29 07:30:00
你還是要切幾個view point,手機版的直式介面,你用電腦版的去做,到時候不就小得不能看?然後vw也有相容性問題,雖然已經9102年了,還是有人在用ie的
作者: EPGo   2019-08-29 13:44:00
vw IE最低支援9、斷點下好再使用、建議使用sass之類預處理例如希望div寬度在750px以下裝置都維持畫面50%可以這樣寫:width: 375/750*100vw 所以強烈建議使用CSS預處理器
作者: ben91lin (一條毫無反應的魯蛇)   2019-08-29 19:36:00
這樣跟設一個全寬的div再用width: %設定有什麼不同?csss計算可以用calc試試
作者: EPGo   2019-08-30 13:45:00
%參考的會是父層容器 vw, vh參考則固定是裝置寬度平板跟手機版設計稿共用時,我喜歡大量使用vw 像是:font-size: 24/750*100vw;750寬 字級24px,往下等比縮小到了375寬 字級12px
作者: MARGHT   2019-08-31 20:21:00
推個 tailwindcss
作者: shter (飛梭之影)   2019-09-08 19:56:00
我真的有一個要開在 LINE 內的 Web App 全用 vw 去做其實還滿方便的,真的好用....效果也如預期但有個重點是我知道那不是一般 RWD 而是只開在直立型手機裝置上用的 Web App 才敢用 vw,它在電腦上效果很糟糕因為橫式螢幕會吃掉太多用 vw去定義出來的 height所以我只用在確保一定是直立開啟的 LINE webview 上
作者: edgefish02   2019-09-21 18:11:00
建議字體還是以(rem,em,%)為主

Links booklink

Contact Us: admin [ a t ] ucptt.com