[讨论] 前端 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