Vue mobile terminal cannot adapt

With the development of mobile Internet, more and more websites and applications are beginning to use mobile terminals as the main access method. In mobile development, how to adapt to different device resolutions has become an important issue. For Vue developers, mobile adaptation requires consideration of adaptation issues for different screen sizes, densities, and orientations.

The traditional adaptation method is achieved through media queries and rem units. The specific method is to first set up different style files for different screens, and then use the rem unit to scale the font and element size relative to the width of the root element. Mobile devices usually use high-definition screens with a Device Pixel Ratio (DPR) greater than 1. In order to ensure the display effect, you need to use the viewport to set the correct scaling ratio. Below is an example of an adaptation scheme based on rem units.

/* 设置用于计算 rem 值的根元素字体大小 */
html {
  font-size: 16px;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
  /* 针对 4 英寸屏幕设置样式 */
  html {
    font-size: 14px;
  }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
  /* 针对 4.7 英寸屏幕设置样式 */
  html {
    font-size: 16px;
  }
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
  /* 针对 5.5 英寸屏幕设置样式 */
  html {
    font-size: 18px;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* 针对 9.7 英寸 iPad 屏幕设置样式 */
  html {
    font-size: 24px;
  }
}

As shown in the above code, media queries are used to set different font sizes of the root element according to the screen width of different devices, and then the rem unit is used to scale the element size relative to the width of the root element.

However, there are some problems with this traditional adaptation method. First, since rem is calculated relative to the root element font size, there may be scaling errors. Secondly, there may be some problems with the viewport scaling setting, which may cause some elements to display abnormally.

Therefore, in Vue mobile development, it is recommended to use flex layout as an adaptation solution. The advantage of using flex layout is that you can adapt to devices of different sizes by setting different flex properties. Typically, mobile adaptation is achieved through the following steps:

1. Use the viewport to set the correct zoom ratio.

Add the following code in the head tag of the HTML file:

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

2. Enable the flex layout feature.

You can use the sass-resources-loader plug-in in the Vue.js project to automatically enable the flex layout feature:

const path = require('path')

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "${path.resolve(__dirname, 'src/assets/scss/flex.scss')}";`
      },
    },
  },
}

Among them, flex.scss file code As follows:

/* 开启 flex 布局特性 */
$flex: 1;

$flex-use-strict: false; // 不使用严格模式，防止出现 flex-basis 百分比计算错误

@mixin flex($direction: row, $justify: center, $align: center) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

@mixin align-self($align: center) {
  align-self: $align;
}

@mixin flex-wrap($wrap: wrap) {
  flex-wrap: $wrap;
}

.flex {
  flex: #{$flex};
}

.flex-row {
  @include flex(row);
}

.flex-column {
  @include flex(column);
}

.flex-start {
  justify-content: flex-start;
}

.flex-end {
  justify-content: flex-end;
}

.flex-between {
  justify-content: space-between;
}

.flex-around {
  justify-content: space-around;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.flex-align-start {
  align-items: flex-start;
}

.flex-align-end {
  align-items: flex-end;
}

.flex-align-center {
  align-items: center;
}

.flex-wrap {
  @include flex-wrap;
}

.flex-self-start {
  @include align-self(flex-start);
}

.flex-self-end {
  @include align-self(flex-end);
}

.flex-self-center {
  @include align-self(center);
}

.flex-self-auto {
  @include align-self(auto);
}

3. Set the rem value according to the resolution of the design draft.

For example: Based on the iPhone 6/7/8 series (375x667), the design draft size is 750x1334. You can first set the font size of the root element to 100px, and then set the size of other elements in rem. Make settings.

html {
  font-size: 100px;
}

@media only screen and (max-width: 480px) { /* 750 x 1334 设计稿在 480 这个断点上相当于 375 x 667 */
  html {
    font-size: 66.7px;
  }
}

@media only screen and (min-width: 481px) and (max-width: 767px) { /* 750 x 1334 设计稿在 768 这个断点上相当于 414 x 736 */
  html {
    font-size: 110.94px;
  }
}

@media only screen and (min-width: 768px) { /* 750 x 1334 设计稿在 768 这个断点上相当于 768 x 1366 */
  html {
    font-size: 153.6px;
  }
}

After using the above steps to implement mobile adaptation, you can avoid using traditional media queries and rem to significantly scale the element size. In addition, the responsive flex layout is suitable for mobile devices with different resolutions and orientations, and can better adapt to the user's device.

The above is the detailed content of Vue mobile terminal cannot adapt. For more information, please follow other related articles on the PHP Chinese website!