【VUE】Common mobile adaptation solutions

Media inquiries @media

The media query properties in CSS3  @media write different size css properties for mobile devices with different screen sizes, examples are as follows:

/* <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%;
  }
}

shortcoming:

1. All the elements on the page have to be  @media defined in different sizes, which is a bit expensive.

2. If there is one more screen size, one more  @media query block needs to be written.

 

rem adaptation scheme

rem It is  CSS3 a new relative unit, which is a   unit relative to the root element html of  the page.font-size

html If the root element  is set  font-size to  18px, then  1rem equal to  18px, rem the size will   change with the change of html the  root element.  The solution is to use this point to set the size of   different root elements according to different screen sizes,   so as to achieve the purpose of adapting to different screen sizes.font-sizeremhtmlfont-size

Currently, all browsers except IE8 and earlier are supported  rem.

1. Use flexible

flexible The solution is an early open source mobile adaptation solution of Ali.  flexible After quoting, we use it uniformly on the page  rem for layout. We create a  rem.js file:

// 封装一个根据屏幕尺寸自动改变 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 It can be used after being introduced in , and you need to manually  convert  px it to rem

2. postcss-pxtorem plugin

Reference: Easily realize px to rem conversion through the plug-in postcss-pxtorem, and complete mobile terminal adaptation [2]

viewport adaptation scheme

viewport Refers to the window, viewport, that part of the area that the browser uses to display web pages.

viewport The scheme uses vw/vh as style units. vw/vh will  viewport be divided into one hundred equal parts, 1vw equal to the width of the viewport  1% , 1vh equal to the height of the viewport  1% . When the width of our design draft is 750px, 1vw it is equal to  7.5px.

1. Set meta tags

For browsing pages in mobile browsers,  viewport the following settings are usually sufficient:

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

initial-scale: The initial zoom ratio, that is, the zoom ratio when the browser loads the page for the first time. maximum-scale: The maximum ratio that the viewer is allowed to zoom to, generally set to 1.0. user-scalable: Whether the viewer can manually zoom, yes or no.

2. px is automatically converted to vw

Using the plug-in postcss-px-to-viewport[3] for related configuration can help us to  px automatically convert it to  vwimprove development efficiency.

Install using npm:

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

 webpack configuration:

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. Mark the attributes that do not need to be converted

In the project, if the designer requires a certain scene not to be adapted, it needs to be a fixed width, height or size. At this time, we need to use the  characteristics postcss-px-to-viewport of the plug-in  ignoring to mark the properties that do not need to be converted, as shown below:

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

Of course, the viewport adaptation scheme also has certain defects: px the conversion  vw may not be completely divisible, so there is a certain pixel difference.

The currently recommended mobile adaptation solution is rem&vw.