V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
zjjblack
V2EX  ›  JavaScript

vue 4k 适配

  •  1
     
  •   zjjblack · 2021-07-23 14:16:40 +08:00 · 3743 次点击
    这是一个创建于 1201 天前的主题,其中的信息可能已经有所发展或是发生改变。

    公司有一个大屏项目 需要适配 4k - 1080p 有什么好的自适应方案么 vw 还是 rem

    17 条回复    2021-09-22 11:46:59 +08:00
    Kimen
        1
    Kimen  
       2021-07-23 14:22:06 +08:00
    考虑一下 scale 呢
    xuxuxu123
        2
    xuxuxu123  
       2021-07-23 14:26:51 +08:00
    vw
    InternetExplorer
        3
    InternetExplorer  
       2021-07-23 14:43:35 +08:00
    rem
    InternetExplorer
        4
    InternetExplorer  
       2021-07-23 14:44:07 +08:00
    rem 配合 postcss-pxtorem
    liyang5945
        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
    rookielzy
        6
    rookielzy  
       2021-07-23 15:51:01 +08:00
    敝司参考 DATAV 的实现效果,使用 scale 来强制页面展示效果为 1080p
    fishlium
        7
    fishlium  
       2021-07-23 15:53:47 +08:00
    scale 好一点,rem 其实不算很好的方案
    kop1989
        8
    kop1989  
       2021-07-23 15:55:02 +08:00
    不管用哪种方案,你们真的认为 4k~1080p 只是等宽缩放么……
    meteor957
        9
    meteor957  
       2021-07-23 15:57:19 +08:00
    vw 吧
    binbinyouliiii
        10
    binbinyouliiii  
       2021-07-23 15:59:33 +08:00
    你买个 4K 屏幕就知道了,跟你的浏览器和操作系统有关
    FFFFourwood
        11
    FFFFourwood  
       2021-07-23 16:00:06 +08:00
    vw vh 再配合 calc
    IvanLi127
        12
    IvanLi127  
       2021-07-23 17:41:56 +08:00
    个人觉得 scale 是个不错的方案 除非长宽比不固定。
    另外 公司有给你配 4k 或以上的屏幕吗?没有的话,我觉得可以砍下需求
    erwin985211
        13
    erwin985211  
       2021-07-23 19:13:32 +08:00
    这跟 vue 没啥关系吧,另外 rem 坑还是有的
    cctrv
        14
    cctrv  
       2021-07-23 19:28:29 +08:00 via iPhone   ❤️ 2
    這裡有個關鍵字
    1. 大屏項目

    然後大屏項目又引起「觀看距離」的問題。
    同時這個 4k 分辨率可能只是類似電影院的多個屏幕合併的 4k 。

    所以高度可能依然維持在 1080 左右,然後寬度 3k 多這樣。

    然後,
    瀏覽器的顯示範圍收到系統的設定的影響。

    做一個簡單頁面。
    去實施現場採集一下分辨率數據,
    那個頁面把各個字號( 12 - 128 )都顯示出來、調查一下合適的觀看距離,了解清晰的可閱讀字號。
    no1xsyzy
        15
    no1xsyzy  
       2021-07-23 20:14:44 +08:00
    你要理解需要设计的部分有「自外向内」的部分和「自内向外」的部分
    前者用 vw 后者用 rem
    中间用框流或者 flex 弥补。
    比如你要搞 <img> 的嵌入文字流的内容,那自然是 em
    比如你要控制整个界面的,那就是 vw
    kkocdko
        16
    kkocdko  
       2021-07-23 21:11:05 +08:00 via Android
    浏览器缩放 200%,目前似乎还没有多少网站适配 4k,大多数人都是开缩放看的,so 适配 1080p 就行了。
    MSDN 似乎是适配了 4k 的,可以参考一下
    KisekiRemi
        17
    KisekiRemi  
       2021-09-22 11:46:59 +08:00
    买个 4k 屏尝试一下,操作系统的显示设置中有一栏缩放(包含推荐选项)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1868 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 16:27 · PVG 00:27 · LAX 08:27 · JFK 11:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.