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 · 185 天前 · 2635 次点击
    这是一个创建于 185 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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