作者newyellow (newyellow)
看板Web_Design
标题[讨论] 前端 responsive 全部使用 vw 来做
时间Thu Aug 29 01:05:43 2019
做专题网站时，通常都由设计师先设计版面 (对方不懂切版)
但常因为解析度不同，版面容易会跑掉
但设计师希望看起来都能维持原比例
通常的 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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1567011945.A.1C9.html
1F：推 prouno: 我现在习惯用 vmin 切直版跟横版 08/29 01:43
喔喔感谢 从来不知道有 vmin! 好像很有趣
(其实我大部分都不是做前端 昨天是帮一个朋友 debug 突发奇想)
不过刚想了一下 vmin 的话 不是会因为使用者直放横放 导致整个版面变形吗
好奇正确的用法是什麽
2F：推 VdustR: 可以实际做一个然後自己用手机和电脑看看就知道了 XD 08/29 01:47
其实我觉得跟需求也有点关系 这种因为是网站专题 才会那麽强调不要变形
3F：推 froce: 你还是要切几个view point，手机版的直式介面，你用电脑版 08/29 07:30
4F：→ froce: 的去做，到时候不就小得不能看？ 08/29 07:30
5F：→ froce: 然後vw也有相容性问题，虽然已经9102年了，还是有人在用ie 08/29 07:31
6F：→ froce: 的 08/29 07:31
天啊 2019 年还要考虑到 IE 的话 ... (晕
是说确实只切一个版不够用，但感觉好像就可以只切两个就好
7F：推 EPGo: vw IE最低支援9、断点下好再使用、建议使用sass之类预处理 08/29 13:44
8F：→ EPGo: 例如希望div宽度在750px以下装置都维持画面50%可以这样写： 08/29 13:46
9F：→ EPGo: width: 375/750*100vw 所以强烈建议使用CSS预处理器 08/29 13:47
感谢! 又学了一招
※ 编辑: 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
10F：推 ben91lin: 这样跟设一个全宽的div再用width: %设定有什麽不同？ 08/29 19:36
11F：→ ben91lin: csss计算可以用calc试试 08/29 19:37
12F：推 EPGo: %参考的会是父层容器 vw, vh参考则固定是装置宽度 08/30 13:45
13F：→ EPGo: 平板跟手机版设计稿共用时，我喜欢大量使用vw 像是： 08/30 13:49
14F：→ EPGo: font-size: 24/750*100vw;750宽 字级24px，往下等比缩小 08/30 13:51
15F：→ EPGo: 到了375宽 字级12px 08/30 13:52
16F：推 MARGHT: 推个 tailwindcss 08/31 20:21
17F：推 shter: 我真的有一个要开在 LINE 内的 Web App 全用 vw 去做 09/08 19:56
18F：→ shter: 其实还满方便的，真的好用....效果也如预期 09/08 19:57
19F：→ shter: 但有个重点是我知道那不是一般 RWD 而是只开在直立型手机装 09/08 19:58
20F：→ shter: 置上用的 Web App 才敢用 vw，它在电脑上效果很糟糕 09/08 19:58
21F：→ shter: 因为横式萤幕会吃掉太多用 vw去定义出来的 height 09/08 19:58
22F：→ shter: 所以我只用在确保一定是直立开启的 LINE webview 上 09/08 19:59
23F：推 edgefish02: 建议字体还是以（rem,em,%）为主 09/21 18:11