【VUE】一般的なモバイル適応ソリューション

メディアに関するお問い合わせ @media

CSS3 のメディアクエリプロパティは、 @media 画面サイズが異なるモバイルデバイスに対して異なるサイズの CSS プロパティを書き込みます。例は次のとおりです。

/* <375px */
@media screen and (max-width:375px) { 
  .box {
    width: 100%;
  }
}
/* >=375px and <450px */
@media screen and (min-width:375px) and (max-width:450px) {
  .box {
    width: 90%;
  }
}
/* >=450px */
@media screen and (min-width:450px) {
  .col{
    width: 80%;
  }
}

欠点:

ページ上のすべての要素を @media 異なるサイズで定義する必要があるため、少々コストがかかります。

画面サイズがもう 1 つある場合は、 @media クエリブロックをさらに 1 つ記述する必要があります。

レム適応スキーム

rem これは CSS3 新しい相対単位であり、ページhtml のルート要素を基準とした相対font-size 単位です。

html ルート要素 font-size がに設定されている場合18px、ルート要素の変更に応じてサイズも変わり1rem ます。解決策は、この点を利用して、さまざまな画面サイズに応じてさまざまなルート要素のサイズを設定し、さまざまな画面サイズに適応するという目的を達成することです。18pxremhtmlfont-sizeremhtmlfont-size

現在、IE8 以前を除くすべてのブラウザがサポートされています rem。

1. 柔軟に使用する

flexible このソリューションは、Ali の初期のオープンソースモバイルアダプテーションソリューションであり、 flexible 引用後、ページ内で統一して rem レイアウトに使用します。ファイルを作成します rem.js 。

// 封装一个根据屏幕尺寸自动改变 html 的 font-size 大小的函数
const init = function () {
  let clientWidth =
    document.documentElement.clientWidth || document.body.clientWidth;
  // 设计图尺寸是 750px，这样 *20 之后，1rem 就等于 20px;
  const fontSize = (clientWidth / 750 * 20);
  document.documentElement.style.fontSize = fontSize + "px";
};

init();

window.addEventListener("resize", init);
export default init;

mian.js で導入されてから使用できるようになりますが、手動で px 変換する必要があります。rem

2.postcss-pxtoremプラグイン

参考：プラグインpostcss-pxtoremでpxからremへの変換を簡単に実現し、モバイル端末への適応も完了[2]

ビューポート適応スキーム

viewport ウィンドウ、ビューポート、ブラウザが Web ページを表示するために使用する領域の部分を指します。

viewport このスキームでは、スタイル単位として vw/vh が使用されます。vw/vh は、ビューポートの幅と高さに等しい viewport 100 の等しい部分に分割されます。デザイン案の幅が 750px の場合、と同じになります。1vw1%1vh1%1vw7.5px

1.メタタグを設定する

モバイルブラウザでページを閲覧する場合、 viewport 通常は次の設定で十分です。

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

initial-scale: 初期ズーム率、つまりブラウザが初めてページを読み込んだときのズーム率です。maximum-scale: ビューアがズームできる最大比率。通常は 1.0 に設定されます。user-scalable: 視聴者が手動でズームできるかどうか。はいまたはいいえ。

2. px は自動的に vw に変換されます

関連する設定にプラグイン postcss-px-to-viewport[3] を使用すると、 px 自動的に変換して vw開発効率を向上させることができます。

npm を使用してインストールします。

npm install postcss-px-to-viewport --save-dev

Webパックの設定:

module.exports = {
  plugins: {
    // ...
    'postcss-px-to-viewport': {
      // options
      unitToConvert: 'px',    // 需要转换的单位，默认为"px"
      viewportWidth: 750,     // 设计稿的视窗宽度
      unitPrecision: 4,       // 单位转换后保留的精度
      propList: ['*', '!font-size'],        // 能转化为 vw 的属性列表
      viewportUnit: 'vw',     // 希望使用的视窗单位
      fontViewportUnit: 'vw', // 字体使用的视窗单位
      selectorBlackList: [],  // 需要忽略的 CSS 选择器，不会转为视窗单位，使用原有的 px 等单位
      minPixelValue: 1,       // 设置最小的转换数值，如果为 1 的话，只有大于 1 的值会被转换
      mediaQuery: false,      // 媒体查询里的单位是否需要转换单位
      replace: true,          // 是否直接更换属性值，而不添加备用属性
      exclude: undefined,     // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
      include: /\/src\//,     // 如果设置了include，那将只有匹配到的文件才会被转换
      landscape: false,       // 是否添加根据 landscapeWidth 生成的媒体查询条件
      landscapeUnit: 'vw',    // 横屏时使用的单位
      landscapeWidth: 1125,   // 横屏时使用的视窗宽度
    },
  },
};

3. 変換する必要のない属性をマークします。

postcss-px-to-viewport プロジェクトで、デザイナーが特定のシーンを適応させないように要求する場合、幅、高さ、またはサイズを固定する必要がありますが、このとき、プラグインの特性を使用してignoring 、適応させないプロパティをマークする必要があります。以下に示すように変換する必要があります。

/* example input: */
.box {
  /* px-to-viewport-ignore-next */
  width: 100px;
  padding: 20px;
  height: 100px; /* px-to-viewport-ignore */
}

/* example output: */
.box {
  width: 100px; 
  padding: 2.6667vw;
  height: 100px;
}

もちろん、ビューポート適応スキームには特定の欠陥もあります。px 変換が vw 完全に割り切れない可能性があるため、一定のピクセル差が生じます。

現在推奨されているモバイルアダプテーションソリューションは rem&vw です。