针对常规化的官网、新闻列表、新闻内页(其它类型暂不要求),需要兼容更高屏幕分辨率下的显示
兼容主要地方
- 统一的页面顶条,即
NIE-topBar
- 统一的页面版权条,即
nie-copyRight
- 页面顶部的版头,包括
tab
和banner
底图- 页面底部的说明,即分享按钮和其它
// 原本的 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
和背景图或者动画视频
// 设置100%
.tab{width:100%;}
两种方式,具体根据效果而定
// 1.背景图平铺,适合可以重复的图
.banner{background-repeat:repeat-x;}
// 2.拉伸铺满
.banner{background-size:100%;}
// 拉伸视频,铺满视频内容
.video {width:100%;object-fit: cover;}
例如:阴阳师首页的底部区域、梦幻手游底部的长廊 处理方式与上面类似
内容则保持居中显示即可 左右两边的漂浮按钮和广告,依旧显示在页面原本位置上(挂靠屏幕的边边上)
- 页面兼容4K,使用的是拉伸原本的素材,会导致一定的变形和模糊,在4K屏幕下
- 兼容的方案只是参考,具体根据页面的布局和样式自定义调整
- QA那边有2K屏幕的显示器可以测试