推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
这是一个创建于 1254 天前的主题，其中的信息可能已经有所发展或是发生改变。
公司有一个大屏项目 需要适配 4k - 1080p 有什么好的自适应方案么 vw 还是 rem
 |
1
Kimen 2021-07-23 14:22:06 +08:00
考虑一下 scale 呢
|
 |
2
xuxuxu123 2021-07-23 14:26:51 +08:00
vw
|
 |
3
InternetExplorer 2021-07-23 14:43:35 +08:00
rem
|
|
4
InternetExplorer 2021-07-23 14:44:07 +08:00
rem 配合 postcss-pxtorem
|
 |
5
liyang5945 2021-07-23 14:53:24 +08:00
rem，以设计图 1920*1080 为例，直接使用 js 设置 1rem=100px, document.documentElement.style.fontSize = window.innerWidth / 19.2 + 'px'，css 写的时候直接除 100，比如设计图元素尺寸 500*500，写的时候就是：width：5.00rem
|
 |
6
rookielzy 2021-07-23 15:51:01 +08:00
敝司参考 DATAV 的实现效果，使用 scale 来强制页面展示效果为 1080p
|
 |
7
fishlium 2021-07-23 15:53:47 +08:00
scale 好一点，rem 其实不算很好的方案
|
 |
8
kop1989 2021-07-23 15:55:02 +08:00
不管用哪种方案，你们真的认为 4k~1080p 只是等宽缩放么……
|
 |
9
meteor957 2021-07-23 15:57:19 +08:00
vw 吧
|
 |
10
binbinyouliiii 2021-07-23 15:59:33 +08:00
你买个 4K 屏幕就知道了，跟你的浏览器和操作系统有关
|
 |
11
FFFFourwood 2021-07-23 16:00:06 +08:00
vw vh 再配合 calc
|
 |
12
IvanLi127 2021-07-23 17:41:56 +08:00
个人觉得 scale 是个不错的方案 除非长宽比不固定。
另外 公司有给你配 4k 或以上的屏幕吗？没有的话，我觉得可以砍下需求 |
 |
13
erwin985211 2021-07-23 19:13:32 +08:00
这跟 vue 没啥关系吧，另外 rem 坑还是有的
|
 |
14
cctrv 2021-07-23 19:28:29 +08:00 via iPhone  2
這裡有個關鍵字
1. 大屏項目 然後大屏項目又引起「觀看距離」的問題。 同時這個 4k 分辨率可能只是類似電影院的多個屏幕合併的 4k 。 所以高度可能依然維持在 1080 左右，然後寬度 3k 多這樣。 然後， 瀏覽器的顯示範圍收到系統的設定的影響。 做一個簡單頁面。 去實施現場採集一下分辨率數據， 那個頁面把各個字號（ 12 - 128 ）都顯示出來、調查一下合適的觀看距離，了解清晰的可閱讀字號。 |
 |
15
no1xsyzy 2021-07-23 20:14:44 +08:00
你要理解需要设计的部分有「自外向内」的部分和「自内向外」的部分
前者用 vw 后者用 rem 中间用框流或者 flex 弥补。 比如你要搞 <img> 的嵌入文字流的内容，那自然是 em 比如你要控制整个界面的，那就是 vw |
 |
16
kkocdko 2021-07-23 21:11:05 +08:00 via Android
浏览器缩放 200%，目前似乎还没有多少网站适配 4k，大多数人都是开缩放看的，so 适配 1080p 就行了。
MSDN 似乎是适配了 4k 的，可以参考一下 |
 |
17
KisekiRemi 2021-09-22 11:46:59 +08:00
买个 4k 屏尝试一下，操作系统的显示设置中有一栏缩放（包含推荐选项）
|
Select Language