大屏适配参考文档

Posted 2021-08-09 隔壁小王66

大屏适配参考文档

方案一：通过js判断是否是大屏，通过动态class或者动态计算来适配

1. 引入判断大屏screen.js

// 判断是否是大屏
export function isBigScreen() {
	let width = window.innerWidth
		|| document.documentElement.clientWidth
		|| document.body.clientWidth;
	return width > 640;
}

2. 在state中引入isBigScreen并添加属性

import { isBigScreen } from "../../common/utils/screen.js";
...
bigScreen: isBigScreen()

3. 在mutations添加更新方法

updateBigScreen(state, data) {
    state.bigScreen = data;
}

1. 在页面中引入bigScreen，isBigScreen,updateBigScreen，并在mounted方法中添加resize监听，因为折叠屏会触发resize，需要做相应处理

import { isBigScreen } from "../../common/utils/screen.js";
...
const _this = this;
window.addEventListener("resize", function () {
      _this.updateBigScreen(isBigScreen());
});

5. 根据bigScreen动态添加class来适配页面局部dom因大屏导致的适配问题，或者通过watch监听此字段通过js来处理相应页面逻辑，看具体场景采用不同方式

例如：有些页面dom宽度通过js计算后动态添加style来适配的，就需要考虑折叠屏resize后重新计算的问题，有些页面个别dom适配问题，就需要通过动态添加class来处理，有些页面在高度充足时采用fixed，在大屏高度不充足时候需要动态调整布局

方案二：@media媒体查询

@media 可以针对不同的屏幕尺寸设置不同的样式，有min-width，max-width，min-width:xx px and max-width: xx px等几种设置

1. min-width

@media screen and (min-width: 641px) {
    background-color: #f00;
}

2. max-width

@media screen and (max-width: 320px) {
    background-color: #f00;
}

3. min-width: and max-width

@media screen and (min-width:320px) and (max-width: 640px){
   background-color: #f00;
}

大屏适配采用@media screen and (min-width: 640px) 就行

使用方法可以直接在需要调整的样式下面调整，例如

      .btn {
          width: 166 * @rmw2;
          height: 42 * @rmw2;
          text-align: center;
          background-color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #5697f4;
          font-size: 22 * @rmw2;
          border-radius: 21 * @rmw2;
          border: 1px solid #5697f4;
          @media screen and (min-width: 640px) {
            background-color: #f00;
          }
        }

方案三：善用flexbox布局，flex权重

不做赘述

方案四：善用vw，vh百分比适配

适用于某些弹窗高度设置，例如在设置弹窗时，一般会固定弹窗高度，在大屏上由于采用可缩放单位，高度不足导致弹窗高于一屏，可以通过设置百分比vh来设置高度，同时内容设置为可滑动来兼容，具体场景具体使用

方案五：小的注意点

1. slider组件问题，由于组件可滑动宽高在mounted中计算，在折叠屏上宽高改变时没有动态改变，导致显示问题，滑动问题，例如酒店首页，详情等
2. 采用单位问题，由于历史原因，如果一个页面或者组件如果基本上用px或者rem，最好统一单位，避免可缩放单位跟不可缩放单位混合使用在大屏上导致显示问题，例如车票列表页面，titlebar组件返回按钮等
3. 由于历史原因，某些页面span会加宽度，在大屏中缩放之后导致展示不全，建议最好不要写死宽度，例如我的页面顶部
4. 自定义title问题，很多页面有滑动title置顶逻辑，滑动距离是写死titlebar高度来计算的，在折叠屏切换大小屏时，titlebar高度改变引起滑动逻辑失效，需要注意一下
5. 自定义titlebar在适配小米折叠屏，当屏幕折叠后，小屏顶部有前置相机孔，需要增加高度或者顶部padding解决，目前只有小米折叠屏出现这个问题。

// 获取机型信息
this.phones = global.get('MtDeviceInfos');

<div class="hotel-collect" v-if="titleBarShow" 
:class="{ 'hotel-collect-zhedie': !bigScreen && phones && phones.deviceModel === 'M2011J18C'}" >