标签：插件 750 适配 px js 宽度 rem

知道几个基本的概念

11rem的值永远等于根元素(html)的font-size属性值的大小
2浏览器默认的font-size值的大小是16px
3下文中rem.js的作用 = flexable.js = 安装的 amfe-flexible
4vscode中使用的 作用=px2rem-loader这个插件的作用


移动端的布局,我们采用的flex+rem的方式(这个是我们熟悉的)
PS:vw vh也能实现适配
vw: 把浏览器视口的宽度分成100份 1vw 1%浏览器的宽度
vh:把浏览器视口的高度分成100份 1vh = 1%浏览器的高度
和%比的区别 是这个是永远相对于视口的 百分比布局是相对于父级的

 第一种方式: 页面中引入这个js文件

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    // recalc改变font-size值的大小
    recalc = function () {
      // 获取我设备的宽度 
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      // 如果设备宽度大于750 超出移动端返回.
      if (clientWidth >= 750) {
        docEl.style.fontSize = '100px';
      } else {
        // 把fontsize值大小设置成大小/750 *100
        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
      }
    };

  if (!doc.addEventListener) return;
  // 在你屏幕发生旋转,或者是放大缩小时执行上面的函数
  win.addEventListener(resizeEvt, recalc, false);
  // 在你的页面初始化的时候执行上面的函数
  doc.addEventListener('DOMContentLoaded', recalc, false);
  /*DOMContentLoaded文档加载完成不包含图片资源 onl oad包含图片资源*/
})(document, window);

 

如果设计师给的设计稿的宽度是750设计稿
10行和14行宽度都改成和设计师给的设计稿宽度相同的尺寸
如果在750设计稿上一个div盒子的宽度经过测量 是375px,正好占页面的50%宽度
根据上面的js文件计算得出 fontsize = 100*(750/750)px =100px = 1rem
width: 3.75rem
当项目上线之后之后,
现在A同学用苹果8P来打开这个上线的网站 设备宽度是414px
首先进入页面会加载那个rem.js文件
在苹果8P打开的页面里面 fontsize = 100*(414/750)px =55.2px = 1rem
在这个苹果8p上看这个盒子width:3.75rem 所以说换算成px是多少呢 3.75*55.2 = 207 px
这个207也恰好是当前这个设备的50%
那么同理,在最开始布局的时候,我按照这个设计稿 把所有的单位
width height margin padding left 等等这些写px的单位全部写成了rem
那么在苹果8上也会按比例放大缩小.其它手机相同.就能实现移动端的适配
在vscode里面来进行配置使用插件css2rem的插件

 

 

当在代码里面写的时候,就不用口算

 

 

 第二种方式.使用手机淘宝的flexable.js库

// 加载阿里CDN的文件
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

 

把页面平均分成10份.将其中一份赋值给了font-size
在设计师给的750设计稿上1rem = 75px
当你测量了之后,测量出来的宽高等像素值,就要除以75
375px = 5rem
换成一个iphone5的手机是320像素 这个flexable.js就会获取设备的宽度(320) 然后把十分之一赋值给font-size
1rem = 32px 那么我们最开始程序员布局的时候写的5rem = 160px 也占当前手机的一半 也实现了适配当前屏幕,其它设备同理如果用的是这个js插件进行适配的话:要在设置中将基准值设置成75px,在布局的过程中.测量出来的px会通过vscode这个插件自动转化成renm  

 

 

 第三种 在vue项目中,我们可以直接用插件的方式

(这种方式的好处是,在页面布局过程中,直接写px就行,最后,会自动通过插件改成rem)
怎么在项⽬中的px转化成rem
参考下面流程 项目中可以直接根据蓝湖设计稿写px就可以
 

//安装 amfe-flexible
cnpm install amfe-flexible -S
//安装 px2rem-loader
cnpm install px2rem-loader -D
//在mian.js中引⼊
import 'amfe-flexible'
//在vue.config.js中配置
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('scss')
      .test(/\.scss$/)
      .oneOf('vue')
      .use('px2rem-loader')
      .loader('px2rem-loader')
      .before('postcss-loader') // this makes it work.
      .options({
      remUnit: 75, //根据视觉稿，rem为px的⼗分之⼀，750px  75rem
      remPrecision: 8 //保留8位⼩数
    })
      .end()
  }
}
//重新启动脚⼿架

当进行了上面的配置,页面上直接写px,最后运行检查浏览器.发现被转化成了rem值

vite工具实现
1:安装
npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save-dev

2.在mian.js中 引入amfe-flexible

import 'amfe-flexible'

3.在vite.config.js中配置postcss-pxtorem
import { defineConfig } from 'vite';
import postCssPxToRem from "postcss-pxtorem";
 
export default defineConfig({
    ...
     css: {
        postcss: {
            plugins: [
                postCssPxToRem({
                    rootValue: 75, // （设计稿/10）1rem的大小
                    propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
                })
            ]
        }
    }
})

 

 针对面试问题：

总结:移动端适配的方式,我们公司是通过flex+rem方式布局,然后配合一个flexable.js的插件来进行的.
是通过npm 安装了flexable 以及还有一个px2rem的插件,然后呢.在webpack里面配置一下,写代码的时候,直接将蓝湖上面,已有的设计稿的宽度(750),写到布局里面去就实现移动端的适配了.
实际上:这个插件的作用就是相当于动态监测打开设备的的屏幕宽度(onLoad/DOMContentLoaded).或者是在屏幕窗口发生变化的时候(resize事件),动态监测屏幕的宽度,然后把屏幕的宽度分成10份,修改根元素(html)的font-size属性的大小.因为rem永远是跟着这个font-size大小来改变,所以就实现了适配
  自己如何实现这个flexable.js文件呢?(想看看你的js逻辑)
我觉得要是我自己写的话,我会去通过addEventListener 监听 onl oad 事件,还有resize事件吧.在里面的时候获取这个clientWidth设备宽度.然后除以10,然后通过setAttribute来修改html元素的font-size值的大小.应该就可以

标签：插件,750,适配,px,js,宽度,rem
From： https://www.cnblogs.com/z-bky/p/17030847.html