公司有一个大屏项目 需要适配 4k - 1080p 有什么好的自适应方案么 vw 还是 rem
考虑一下 scale 呢
vw
rem
rem 配合 postcss-pxtorem
rem,以设计图 1920*1080 为例,直接使用 js 设置 1rem=100px, document.documentElement.style.fontSize = window.innerWidth / 19.2 + 'px',css 写的时候直接除 100,比如设计图元素尺寸 500*500,写的时候就是:width:5.00rem
敝司参考 DATAV 的实现效果,使用 scale 来强制页面展示效果为 1080p
scale 好一点,rem 其实不算很好的方案
不管用哪种方案,你们真的认为 4k~1080p 只是等宽缩放么……
vw 吧
你买个 4K 屏幕就知道了,跟你的浏览器和操作系统有关
vw vh 再配合 calc
个人觉得 scale 是个不错的方案 除非长宽比不固定。
另外 公司有给你配 4k 或以上的屏幕吗?没有的话,我觉得可以砍下需求
这跟 vue 没啥关系吧,另外 rem 坑还是有的
這裡有個關鍵字
1. 大屏項目
然後大屏項目又引起「觀看距離」的問題。
同時這個 4k 分辨率可能只是類似電影院的多個屏幕合併的 4k 。
所以高度可能依然維持在 1080 左右,然後寬度 3k 多這樣。
然後,
瀏覽器的顯示範圍收到系統的設定的影響。
做一個簡單頁面。
去實施現場採集一下分辨率數據,
那個頁面把各個字號( 12 - 128 )都顯示出來、調查一下合適的觀看距離,了解清晰的可閱讀字號。
你要理解需要设计的部分有「自外向内」的部分和「自内向外」的部分
前者用 vw 后者用 rem
中间用框流或者 flex 弥补。
比如你要搞
![]()
的嵌入文字流的内容,那自然是 em
比如你要控制整个界面的,那就是 vw
浏览器缩放 200%,目前似乎还没有多少网站适配 4k,大多数人都是开缩放看的,so 适配 1080p 就行了。
MSDN 似乎是适配了 4k 的,可以参考一下