Terminal mudah alih Vue tidak boleh menyesuaikan diri

Dengan pembangunan Internet mudah alih, semakin banyak laman web dan aplikasi mula menggunakan terminal mudah alih sebagai kaedah capaian utama. Dalam pembangunan mudah alih, cara menyesuaikan diri dengan resolusi peranti yang berbeza telah menjadi isu penting. Bagi pembangun Vue, penyesuaian mudah alih memerlukan pertimbangan isu penyesuaian untuk saiz, ketumpatan dan orientasi skrin yang berbeza.

Kaedah penyesuaian tradisional dicapai melalui pertanyaan media dan unit rem. Kaedah khusus adalah dengan mula-mula menyediakan fail gaya yang berbeza untuk skrin yang berbeza, dan kemudian menggunakan unit rem untuk menskalakan fon dan saiz elemen berbanding dengan lebar elemen akar. Peranti mudah alih biasanya menggunakan skrin definisi tinggi dengan Nisbah Piksel Peranti (DPR) lebih besar daripada 1. Untuk memastikan kesan paparan, anda perlu menggunakan port pandangan untuk menetapkan nisbah penskalaan yang betul. Di bawah ialah contoh skema penyesuaian berdasarkan unit rem.

/* 设置用于计算 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;
  }
}

Seperti yang ditunjukkan dalam kod di atas, pertanyaan media digunakan untuk menetapkan saiz fon elemen akar yang berbeza mengikut lebar skrin peranti yang berbeza, dan kemudian unit rem digunakan untuk menskalakan saiz elemen berbanding dengan lebar unsur akar.

Walau bagaimanapun, terdapat beberapa masalah dengan kaedah penyesuaian tradisional ini. Pertama, memandangkan rem dikira relatif kepada saiz fon elemen akar, mungkin terdapat ralat penskalaan. Kedua, mungkin terdapat beberapa masalah dengan tetapan penskalaan port pandangan, yang mungkin menyebabkan beberapa elemen dipaparkan secara tidak normal.

Oleh itu, dalam pembangunan mudah alih Vue, adalah disyorkan untuk menggunakan reka letak flex sebagai penyelesaian penyesuaian. Kelebihan menggunakan susun atur flex ialah anda boleh menyesuaikan diri dengan peranti dengan saiz yang berbeza dengan menetapkan sifat flex yang berbeza. Biasanya, penyesuaian mudah alih dicapai melalui langkah berikut:

1. Gunakan port pandangan untuk menetapkan nisbah zum yang betul.

Tambah kod berikut dalam teg kepala fail HTML:

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

2. Dayakan ciri reka letak fleksibel.

Anda boleh menggunakan pemalam sass-resources-loader dalam projek Vue.js untuk mendayakan ciri reka letak fleksibel secara automatik:

const path = require('path')

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

Antaranya, fail flex.scss kod adalah seperti berikut:

/* 开启 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. Tetapkan nilai rem mengikut resolusi draf reka bentuk.

Contohnya: berdasarkan siri iPhone 6/7/8 (375x667), saiz draf reka bentuk ialah 750x1334 Anda boleh menetapkan saiz fon elemen akar kepada 100px, dan kemudian tetapkan saiz elemen lain dalam rem.

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;
  }
}

Selepas menggunakan langkah di atas untuk melaksanakan penyesuaian mudah alih, anda boleh mengelak daripada menggunakan pertanyaan media tradisional dan rem untuk menskalakan saiz elemen dengan banyak. Selain itu, susun atur fleksibel responsif sesuai untuk peranti mudah alih dengan resolusi dan orientasi yang berbeza, dan boleh menyesuaikan diri dengan peranti pengguna dengan lebih baik.

Atas ialah kandungan terperinci Terminal mudah alih Vue tidak boleh menyesuaikan diri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!