当前位置：网站首页>02-移动端页面适配

02-移动端页面适配

2022-07-24 05:16:00 【乖女子@@@】

我们知道移动端的宽高是不固定的需要根据手机屏幕的大小决定；------------------需要在移动端进行页面适配

1.页面适配的原理：

移动端的宽高是不固定的需要根据手机屏幕的大小决定(所以不能使用px进行页面布局)
使用rem动态的调整页面内容
#rem定义：
rem是一个css单位；
rem是相对于根元素<html>字体大小决定的，1rem=根标签字体大小px，这样就意味着，我们只需要在根元素确定一个 px字号，则可以来算出元素的宽高；
---一般将根标签的字体大小设置为屏幕宽度的10分之一
---根元素字号的大小即为1rem;
---全屏即为10rem;
#移动端使用rem单位进行布局的原理：
-----#[1]将html标签字体大小设置为 屏幕宽度 的 10分之1
-----#[2]设置任何带px的单位都是----数值px/设计 稿宽度 的 10分之1
//以设计稿为750px为例：
//---因为我们现在依据的设计稿宽度是750px;
//---我们希望手机屏幕大小为750px的时候，宽度可以沾满全屏，
//------当宽度为750px的时候，字体大小为75px(因为html根标签的字体大小为屏幕宽度的10分之1)即1rem；
//------所以1rem==75px;
//-----所以我们要想将带px的单位转化为rem时除以75即可(也就是设计稿宽度的10分之1)
​
//获取屏幕宽度 ：window.innerWidth;
//设置字体大小window.querySelector('html').style.fontsize=window.innerWidth/10+'px';

2.页面适配插件-lib-flexible

-----这里是淘宝的可伸缩布局方案

作用：可以自动给页面的html标签设置字体大小为屏幕宽度的10分之1，以此设置rem的基本值；

lib-flexible插件可以动态监测屏幕的大小；

使用步骤：

  • [1]安装lib-flexible

npm i -S amfe-flexible

  • 在main.js中导入lib-flexible

import 'amfe-flexible'

原理：

----封装了一个函数，将html根标签的字体大小设置为屏幕宽度的 10分之1 ；

---设置一个监听页面尺寸大小改变事件(resize),当页面尺寸大小改变的时候，重新调用上面封装的函数；

---所以安装了这个插件，每当窗口大小改变的时候，页面内容可以自动适配；

封装一个方法将带px的数据转化为带res的数据

# 因为less是可以定义变量和方法的！
// 封装一个方法，将px转化为rem
.rem(@attr,@value) {
  @{attr}: @value/75rem;
}
.box {
  // width: 10rem;
  // height: 88/75rem;
  .rem(width, 750);
  .rem(height, 88);
  background-color: red;
}

3.页面适配插件2-postcss-pxtorem

---当我们安装了flexible页面插件之后还需要手动去将页面中所有带px单位的数据转化为rem单位；

---并且当我们使用vant等插件的时候，里面的数据都是使用px的，我们没有办法转化(postcss-pxtorem是基于vant的插件，可以将所有带px的单位--包括vant组件内的自动转化为rem单位)

postcss-pxtorem来自动设置可以自动将页面的带px单位的数据转化为rem单位；

前提：

----我们可以封装一个方法将所有带px单位的数据转化为带rem的数据；

---但是我们使用vant组件时，vant的所有数据已经是带px的了；

----所以我们要使用postcss-pxtorem插件将带px的转化为带rem单位的数据；

使用步骤：

  • [1]下载

npm install postcss-pxtorem --save-dev

  • [2]vue2.x使用---创建一个vue.config.js,在里面copy如下代码

// 项目根目录中创建了`vue.config.js`
// 导包
# 在相应需要加前缀的 css 样式前面加上前缀(做了兼容性处理)
const autoprefixer = require('autoprefixer')
// 导包
# 将相应的带px单位的数据转化为带rem单位的数据
# 原理：除以设计稿的 10分之1 (vant采用的设置稿为375px)
const pxtorem = require('postcss-pxtorem')
​
// 暴露出去
module.exports = {
  // css属性如何处理
  css: {
    // 处理的选项
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          // 使用 pxtorem库进行转换
          pxtorem({
            rootValue: 37.5, // 此处的值为vant设计稿宽度的1/10；
            propList: ['*'] // 项目中所有的地方css都需要转化；
          })
        ]
      }
    }
  }
}

注意事项

[1]

-----postcss-pxtorem使用的设计稿是vant的设计稿宽度为375px;

----所以这个插件可以将所有的vant组件的数据(按钮，文字等)正常转化；

----但是我们自己的设计稿若不是375px时就须要进行手动转化；

# 比如我们的设计稿为750px，所以我们在写px单位的时候，需要除以2；
# (因为的们的设计稿为750px，所以我们转化为rem单位的时候需要除以75，而插件帮我们转化的时候是除以的37.5，所以我们自己还要手动除以2；)

[2]

配置项修改之后要重启脚手架；

错误点

在这里直接下载，会报一个错误---PostCSS plugin postcss-pxtorem requires PostCSS 8

原因：版本过高

解决:下载指定版本----npm i [email protected]

4.页面适配插件3-normalize.css

很多现代化浏览器会为元素标签添加一些独有的默认样式，这会带来一定的显示差异，

作用：消除不同浏览器之间页面之间的差异

步骤：

  • 下载 normalize.css

npm install normalize.css

  • 导入第三方包(main.js)

import 'normalize.css'

原网站

版权声明
本文为[乖女子@@@]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_43260366/article/details/120453720

边栏推荐

猜你喜欢

随机推荐