个人自学前端38-Vue15-移动端适配

目录

• 移动端适配
  • 一：移动设备和pc设备的区别
    • 1：分辨率不一样
  • 2：应用的尺寸不一
    • • • 1:em
        • 2:rem (r : root)
    • 二：移动端适配
    • 1: Rem适配
    • 2: vw或者vh适配.

移动端适配

一：移动设备和pc设备的区别

1：分辨率不一样

pc的分布率是72，手机的分辨率各不相同。

为了解决分辨率各不相同的问题，需要利用meta标签设置视口。( 把所有手机的分辨率都当成72来处理 )

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2：应用的尺寸不一

pc网页的内容宽度一般是固定.1000或者1200.

移动端的app一般都是铺满手机屏幕,然而不同的手机尺寸不一样,因此样式就应该不一样.因此移动端的必须做适配,保证一套样式可以适配多种手机.

两个单位:

1:em

相对于当前的标签的字号计算. 例如当前的标签字号是30.则1em就是30px.

2:rem (r : root)

相对于html标签的字号计算. 例如html标签的字号是30.则1rem就是30px.

二：移动端适配

1: Rem适配

原理: 根据不同的视口宽度,设置不同的html字号.

利用插件监听视口的宽度变化,设置对应的html根字号.

可以使用的插件：lib-flexible，amfe-flexble。（ 淘宝的移动端适配插件 ）( 换算比例都是1:10 )

字号自动设置之后，还可以借助插件自动根据px计算rem。

推荐下载postcss-px2rem.这个插件也需要设置html的字号.remUnit:32.

应该在postcss.config.js内进行根字号设置.

如果1px不需要转换成rem.1px就写成 1PX

安装amfe-flexible插件 ( 根据不同的屏幕宽设置不同的根字号大小 )

npm i -S amfe-flexible;

引入插件amfe-flexible

import 'amfe-flexible';

安装postcss-px2rem ( 根据根字号大小, 把px转换成rem )

npm i postcss-px2rem -D

初始的html字号设置为多少？

1：需要知道设计稿的宽度。

2：需要知道插件的换算比例。

初始的html字号 = 用设计稿的宽 * 换算比例.

在项目根目录下，新建一个postcss.config.js文件进行配置。

module.exports = {
    plugins: {
       autoprefixer: {},
      'postcss-px2rem':{
        // 设置1:10的比例下,750宽的设计稿的默认html字号大小.
        remUnit:75,
        // 所有的样式都会转换为rem
        propList: ['*'],
        // node_modules内部所有的样式都不转换为rem
        exclude: /node_modules/i,
        // 所有包含.acitve的选择器样式都不转换为rem
        selectorBlackList: ['.active']
      }
    }
}

2: vw或者vh适配.

vw: 相对于视口宽度动态计算px

vh: 相对于视口的高度计算px

百分比: 相对于父元素的宽或高来设置px.

借助于插件 postcss-px-to-viewport 帮助我们在不同的设计稿宽度下自动把px换成vw或者vh.

安装 postcss-px-to-viewport插件

npm i postcss-px-to-viewport -D

postcss-px-to-viewport也需要配置postcss.config.js

module.exports = {
    plugins: {
       autoprefixer: {},
      'postcss-px-to-viewport': {
        viewportWidth: 320,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
        viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
        unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
        viewportUnit: "vw",   //指定需要转换成的视窗单位，建议使用vw
        selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
        minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
        mediaQuery: false     // 允许在媒体查询中转换`px`
      },
    }
}