网站服务部小组文档

关于PC页面兼容2K、4K屏幕说明


概述

针对常规化的官网、新闻列表、新闻内页(其它类型暂不要求),需要兼容更高屏幕分辨率下的显示

兼容主要地方

  • 统一的页面顶条,即NIE-topBar
  • 统一的页面版权条,即nie-copyRight
  • 页面顶部的版头,包括 tabbanner底图
  • 页面底部的说明,即分享按钮和其它

默认样式调整

  // 原本的 max-width:1920px,改为如下:
  html,body{width:100%;}

  // 原本居中的整个页面,改为自适应,去掉margin:0 auto居中
  .warp {width:100%;}
  // 原本自适应的内容,改为限制最大宽度,然后居中
  .content {max-width:1920px;margin:0 auto;}

顶条与版权

统一将顶条和版权,都迁移到 body节点下,由组件统一控制自适应全屏 如页面布局需要不能迁移到根节点下,则需要保证父节点宽度100%

  <body>
    // JS方式引入的顶条
    <div id="NIE-topBar"></div>
    // include方式引入的顶条
    <!--#include virtual="/global_site_inc/topBar-include.html"-->

    // 原本的内容节点
    <div class="warp">
      <div class="content"> </div>
    </div>

    // 版权
    <div id="NIE-copyRight"></div>
  </body>

顶部版头

顶部版头,一般是带有导航Tab背景图或者动画视频

针对导航Tab

  // 设置100%
  .tab{width:100%;}

两种方式,具体根据效果而定

  // 1.背景图平铺,适合可以重复的图
  .banner{background-repeat:repeat-x;}

  // 2.拉伸铺满
  .banner{background-size:100%;}

针对video视频

  // 拉伸视频,铺满视频内容
  .video {width:100%;object-fit: cover;}

带有横向铺满区域

例如:阴阳师首页的底部区域、梦幻手游底部的长廊 处理方式与上面类似

其它情况

内容则保持居中显示即可 左右两边的漂浮按钮和广告,依旧显示在页面原本位置上(挂靠屏幕的边边上)

特别注意事项

  • 页面兼容4K,使用的是拉伸原本的素材,会导致一定的变形和模糊,在4K屏幕下
  • 兼容的方案只是参考,具体根据页面的布局和样式自定义调整
  • QA那边有2K屏幕的显示器可以测试