精华内容
下载资源
问答
  • 移动端适配

    2021-02-04 14:20:29
    移动端适配 使用postcss-pxtorem插件将px转成动态rem 因为rem是根据根元素html的值为基准来动态转换px的,也就是说html是多少像素那么1rem 就是多少像素,所以我们必须先根据屏幕的宽度来设置我们的html元素的px值...

    移动端适配

    使用postcss-pxtorem插件将px转成动态rem
    因为rem是根据根元素html的值为基准来动态转换px的,也就是说html是多少像素那么1rem 就是多少像素,所以我们必须先根据屏幕的宽度来设置我们的html元素的px值。
    新建rem.js文件,在main.js中引用

    // 设计稿以750px为宽度,而我把页面宽度设计为10rem的情况下
    const baseSize = 75; // 这个是设计稿中1rem的大小。
    function setRem() {
        // 实际设备页面宽度和设计稿的比值
        const scale = document.documentElement.clientWidth / 750;
        // 计算实际的rem值并赋予给html的font-size
        document.documentElement.style.fontSize = (baseSize * scale) + 'px';
    }
    setRem();
    window.addEventListener('resize', () => {
        setRem();
    });
    

    1.1. 安装postcss-pxtorem
    postcss-pxtorem是PostCSS的插件,用于将px单位生成rem单位

    yarn add postcss-pxtorem
    

    1.2 配置
    可以通过3个地方来添加配置,配置文件皆位于vue 项目根目录中,若文件不存在可以自行建立。
    其中最重要的是这个:

    • rootValue (Number)
      • 根元素的值,即1rem的值
      • 用于设计稿元素尺寸/rootValue
      • 比如 rootValue = 75 时,在css中width: 375px; 最终会换算成width: 5rem;

    还有一些其他的配置:

    • propList (Array) 需要做单位转化的属性.
      • 必须精确匹配
      • 用 * 来选择所有属性. Example: [’*’]
      • 在句首和句尾使用 * ([‘position’] 会匹配 background-position-y)
      • 使用 ! 来配置不匹配的属性. Example: [’*’, ‘!letter-spacing’]
      • 组合使用. Example: [’’, ‘!font’]
    • minPixelValue(Number) 可以被替换的最小像素.
    • unitPrecision(Number) rem单位的小数位数上限.

    完整的可以看官方文档

    • 权重
      vue.config.js > .postcssrx.js > postcss.config.js
      其中 postcssrc.js 和 postcss.config.js 可以热更新,
      vue.config.js 中做的修改要重启devServer

    配置示例

    vue.config.js

    module.exports = {
        //...其他配置
        css: {
          loaderOptions: {
            postcss: {
              plugins: [
                require('postcss-pxtorem')({
                  rootValue: 192,
                  minPixelValue: 2,
                  propList: ['*'],
                })
              ]
            }
          }
        },
      }
    

    postcssrx.js

    module.exports = {
        plugins: {
            'postcss-pxtorem': {
                rootValue: 16,
                minPixelValue: 2,
                propList: ['*'],
            }
        }
    }
    

    postcss.config.js

    module.exports = {
      plugins: {
        'postcss-pxtorem': {
          rootValue: 192,
          minPixelValue: 2,
          propList: ['*'],
        }
      }
    }
    
    展开全文
  • React移动端适配

    2021-07-01 16:30:25
    创建项目 修改App.jsx(即App.js)文件 import './App.css'; import './App.less' import './tools/rem' function App() { return ( <div className="App"> ... 本次分享了less引入与移动端适配

    创建项目

    修改App.jsx(即App.js)文件

    import './App.css';
    import './App.less'
    import './tools/rem'
    
    function App() {
      return (
        <div className="App">
            <div className="demo">
              这是一个项目
            </div>
        </div>
      );
    }
    
    export default App;
    

    修改App.less文件

     /* Less */
     @color: #999;
     @bgColor: skyblue;//不要添加引号
    //  @width: 80%;
    .demo{
        color: @color;
        background-color: @bgColor;
        width: 675px;
        height: 50px;
        margin: 0 auto;
        text-align: center;
    }
    

    css文件内容(过会不用)

    .demo{
      color: #999;
      background-color: skyblue;
      width: 500px;
      height: 50px;
      margin: 0 auto;
      text-align: center;
    }
    

    效果展示

    在这里插入图片描述
    手机展示
    在这里插入图片描述

    iPad展示

    安装依赖

    安装依赖1

    yarn add postcss-px2rem customize-cra react-app-rewired
    

    在这里插入图片描述

    安装依赖2

    yarn add @craco/craco
    

    在这里插入图片描述

    安装依赖3

    yarn add craco-less
    

    在这里插入图片描述

    安装依赖4

    yarn add babel-plugin-import
    

    在这里插入图片描述

    根目录下建立config-overrides.js

    const { override, fixBabelImports, addPostcssPlugins, addLessLoader } = require('customize-cra');
    module.exports = override(
      fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: 'css',
      }),
      addPostcssPlugins(
          [
              require("postcss-px2rem")({remUnit:375/10})
          ]
      )
    );
    

    更改package.json启动命令

      "scripts": {
        "start": "react-app-rewired  start",
        "build": "react-app-rewired  build",
        "test": "react-app-rewired  test",
        "eject": "react-app-rewired  eject"
      },
    

    在这里插入图片描述

    编写js文件并且引用

    根据我个人习惯,src下创建了文件夹,文件夹写的js文件
    src->tools->rem.js

    function adapter() {
      // 获取手机横向的设备独立像素
      const dip = document.documentElement.clientWidth
      //计算根字体大小(100是根据我们自己指定的,375是设计稿宽度)
      const rootFontSize = dip / 20
      // 设置根字体
      document.documentElement.style.fontSize = rootFontSize + 'px'
    }
    adapter()
    window.onresize = adapter
    

    写完后在App.js文件引用

    import './tools/rem'
    

    在这里插入图片描述

    断开css引入,用less效果不变

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    适配方法很多,这是其中一种react的适配方法,通过调用库进行实现,这种方法可以写px直接映射rem。中间引用了几个其他库,是为了完成less引用。
    本次分享了less引入与移动端适配。

    展开全文
  • CSS移动端适配

    2020-12-18 21:43:00
    CSS移动端适配 一:前端开发的常用单位 1.像素(px) 什么是像素(Pixel)? 在前端开发中视口的水平方向和垂直方向是由很多小方格组成的, 一个小方格就是一个像素 例如div尺寸是100 x 100, 那么水平方向就占用100个...

    CSS移动端适配

    一:前端开发的常用单位

    1.像素(px)

    1. 什么是像素(Pixel)?
      在前端开发中视口的水平方向和垂直方向是由很多小方格组成的, 一个小方格就是一个像素
      例如div尺寸是100 x 100, 那么水平方向就占用100个小方格, 垂直方向就占用100个小方格

    2. 像素特点
      不会随着视口大小的变化而变化, 像素是一个固定的单位(绝对单位)

    2.百分比(%)

    1. 什么是百分比?
      百分比是前端开发中的一个动态单位, 永远都是以当前元素的父元素作为参考进行计算
      例如父元素宽高都是200px, 设置子元素宽高是50%, 那么子元素宽高就是100px

    2. 百分比特点
      2.1 子元素宽度(width)是参考父元素宽度(width)计算的
      2.2 子元素高度(height)是参考父元素高度(height)计算的
      2.3 子元素padding无论是水平还是垂直方向都是参考父元素宽度(width)计算的
      2.4 子元素margin无论是水平还是垂直方向都是参考父元素宽度(width)计算的
      2.5 不能用百分比设置元素的border

    结论: 百分比是一个动态的单位, 会随着父元素宽高的变化而变化(相对单位)

    3.em

    1. 什么是em?
      em是前端开发中的一个动态单位, 是一个相对于元素字体大小的单位
      例如font-size: 12px; ,那么1em就等于12px

    2. em特点
      2.1 当前元素设置了字体大小, 那么就相对于当前元素的字体大小
      2.2 当前元素没有设置字体大小, 那么就相当于第一个设置字体大小的祖先元素的字体大小
      2.3 如果当前元素和所有祖先元素都没有设置大小, 那么就相当于浏览器默认的字体大小 google的是16px

    结论: em是一个动态的单位, 会随着参考元素字体大小的变化而变化(相对单位)

    4.rem

    1. 什么是rem?
      rem就是root em, 和em是前端开发中的一个动态单位,
      rem和em的区别在于, rem是一个相对于根元素字体大小的单位
      例如 根元素(html) font-size: 12px; ,那么1em就等于12px

    2. rem特点
      2.1 除了根元素以外, 其它祖先元素的字体大小不会影响rem尺寸
      2.2 如果根元素设置了字体大小, 那么就相对于根元素的字体大小
      2.3 如果根元素没有设置字体大小, 那么就相对于浏览器默认的字体大小

    结论: rem是一个动态的单位, 会随着根元素字体大小的变化而变化(相对单位)

    5.vwvh

    1. 什么是vw(Viewport Width)和vh(Viewport Height)?
      1.1 vw和vh是前端开发中的一个动态单位, 是一个相对于网页视口的单位
      1.2 系统会将视口的宽度和高度分为100份,1vw就占用视口宽度的百分之一, 1vh就占用视口高度的百分之一
      1.3 vw和vh和百分比不同的是, 百分比永远都是以父元素作为参考
      而vw和vh永远都是以视口作为参考

    结论: vw/vh是一个动态的单位, 会随着视口大小的变化而变化(相对单位)

    6.vmin和vmax

    1. 什么是vw(Viewport Width)和vh(Viewport Height)?
      vmin: vw和vh中较小的那个
      vmax: vw和vh中较大的那个
      使用场景: 保证移动开发中屏幕旋转之后尺寸不变
      获取视口的宽高
      window.innerWidth, window.innerHeight

    二:移动端视口标签

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

    1.什么是视口?

    视口简单理解就是可视区域大小我们称之为视口
    在pc端,视口就是浏览器窗口可视区域的大小
    在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980

    2.如何保证在移动端不自动缩放网页的尺寸

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    width=device-width 设置视口宽度等于设备的宽度
    initial-scale=1.0 初始缩放比例, 1不缩放
    maximum-scale:允许用户缩放到的最大比例
    minimum-scale:允许用户缩放到的最小比例
    user-scalable:用户是否可以手动缩放
    

    三:移动端适配方案一

    1.通过媒体查询
     媒体查询的方式可以说是我早期采用的布局方式,
     它主要是通过查询设备的宽度来执行不同的css代码,最终达到界面的配置
     
     2.媒体查询优势
     简单, 哪里不对改哪里
     调整屏幕宽度的时候不用刷新页面即可响应式展示
     特别适合对移动端和PC端维护同一套代码的时候
    
     3.媒体查询劣势
     由于移动端和PC端维护同一套代码, 所以代码量比较大,维护不方便
     为了兼顾大屏幕或高清设备,会造成其他设备资源浪费,特别是加载图片资源
     为了兼顾移动端和PC端各自响应式的展示效果,难免会损失各自特有的交互方式
    
     4.应用场景
     对于比较简单(界面不复杂)的网页, 诸如: 企业官网、宣传单页等
     我们可以通过媒体查询、伸缩布局、Bootstrap来实现响应式站点
    

    四:移动端适配方案二

    1.通过媒体查询 + rem
    虽然我们将移动端独立到一套代码中了, 但是由于移动端也有很多的屏幕尺寸, 所以也需要进行适配
    例如:
    iPhone3/4/5:  320px
    iPhone678:    375px
    iPhoneX/plus: 414px
    
    当下在企业开发中设计师提供给我们的移动端设计图片是750*xxx的或者1125*xxx的
    所以我们需要对设计师提供的图片进行等比缩放, 这样才能1:1还原设计图片
    
    2.如何等比缩放?
    2.1将设计图片等分为指定份数,求出每一份的大小
       例如: 750设计图片分为7.5份, 那么每一份的大小就是100px
    2.2将目标屏幕也等分为指定份数,求出每一份的大小
       例如: 375屏幕也分为7.5份, 那么每一份的大小就是50px
    
    2.3用 原始元素尺寸 / 原始图片每一份大小 * 目标屏幕每一份大小 = 等比缩放后的尺寸
       例如: 设计图片上有一个150*150的图片, 我想等比缩放显示到375屏幕上
       那么: 150 / 100 * 50 = 1.5*50 = 75px
    
    3.如何在前端开发中应用这个计算公式?
    3.1目标屏幕每一份的大小就是html的font-size: 50px
    3.2使用时只需要用 "原始元素尺寸 / 原始图片每一份大小rem" 即可
                      150 / 100 = 1.5 / 1.5rem
                      1rem = 50px  / 1.5rem === 1.5*50 = 75px
     对于比较复杂(界面复杂)的网页, 诸如: 电商、团购等
     更多的则是才是PC端一套代码, 移动端一套代码
    

    五:移动端适配方案三

    通过媒体查询的方法,需要写一大堆的对font-size的设置,这个太不方便了
    况且一般在移动端用的手机浏览的网页,手机大小是固定的
    可以通过用javascript的方式来操作html根元素的font-size的值
        注意点: 
        通过JS动态计算当前屏幕每一份大小的好处: 不用写很多的媒体查询
        坏处: 切换了屏幕尺寸之后需要刷新界面才有效,而媒体查询如果切换了屏幕的尺寸不需要重新刷新界面
        document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
    

    六:设备像素和css像素

    1.什么是设备像素和CSS像素?
    1.1设备像素又称为物理像素, 是"物理屏幕"上真实存在的发光点,只有屏幕一经出厂就固定不会改变
    1.2CSS像素又称为逻辑像素,是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素
    
    例如: iPhone3G/iPhone3GS 3.5英寸/ 逻辑像素320*480 / 设备像素320*480
          iPhone4/4S         3.5英寸/ 逻辑像素320*480 / 设备像素640*960
    也就是说CSS像素和设备像素在有的时候是不一样的
    
    3.什么时候不一样?为什么不一样?
    3.1在PC端,1个CSS像素往往都是对应着电脑屏幕的1个物理像素,
     所以我们无需关心PC端的CSS像素和设备像素
    
    3.2在手机端,最开始其实1个CSS个像素也是对应着手机屏幕的1个物理像素,
    但是后来一个改变世界的男人(乔布斯)改变了这一切~
    从iPhone4开始,苹果公司推出了所谓的retina视网膜屏幕。
    iPhone4的屏幕尺寸却没有变化,但是像素点却多了一倍
    这就导致了在1个CSS个像素等于1个物理像素的手机上, 我们设置1个CSS像素只会占用1个物理像素
    而在1个CSS个像素不等于1个物理像素的手机上, 我们设置1个CSS像素就会占用2个物理像素
    所以仔细观察你会发现同样是1像素但是在retina视网膜屏幕的手机上会粗一些
    

    七:移动端适配的最终方案

    1.如何解决设备像素和CSS像素不一样的问题?
      如果设备像素和CSS像素一样, 那么无需处理不会带来任何负面影响
      如果设备像素是CSS像素的2倍, 那么我们只需将CSS像素缩小一半即可
      但是有时候设备像素可能是CSS像素的3倍/4倍...
    
    2.获取设备像素比DPR(Device Pixel Ratio)
        DPR = 设备像素 / CSS像素
        iPhone3GS :  320 / 320 = 1
        iPhone4S:    640 / 320 = 2
        iPhone678:   750 / 375 = 2
        iPhoneX:     1125 / 375 = 3
        在JS中我们可以通过 window.devicePixelRatio 获取当前的设备像素
    
    3.如何缩小?
        通过 <meta name="viewport">的initial-scale属性来缩小
        注意点: 缩放视口后视口大小会发生变化
    
       let scale = 1.0 / window.devicePixelRatio;
       let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
       document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
    

    八:pc or 移动端界面自动跳转

       <script>
     2     /*
     3     1.如何实现PC端一套代码,移动端一套代码,
     4     在PC端打开自动打开PC端界面
     5     在移动端打开自动打开移动端界面
     6 
     7     2.实现步骤:
     8     2.1默认打开PC端界面
     9     2.2在PC端界面中通过BOM拿到当前浏览器信息
    10     2.3通过正则判断当前浏览器是否是移动端浏览器
    11     2.4通过BOM的location对象实现跳转到移动端界面
    12     * */
    13 
    14     /*
    15     PC:     Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36
    16     移动端: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1
    17     移动端: Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Mobile Safari/537.36
    18     * */
    19     // let userAgentInfo = navigator.userAgent;
    20     // console.log(userAgentInfo);
    21     function isPc() {
    22         let userAgentInfo = navigator.userAgent;
    23         if(/iphone/i.test(userAgentInfo)){
    24             return false;
    25         }else if(/android/i.test(userAgentInfo)){
    26             return false;
    27         }
    28         return true;
    29     }
    30     if(!isPc()){
    31         location.href = "http://m.jd.com";
    32     }
    33 </script>
    

    原文:CSS移动端适配

    展开全文
  • vue 移动端适配方案

    2021-01-28 10:56:26
    1.下载lib-flexible npm i lib-flexible --save 2.引入lib-flexible 在main.jsin引入 import 'lib-flexible/flexible' 3.设置meta标签 <meta content="width=device-width, initial-scale=1.0, maximum-scale...

    1.下载lib-flexible

    • npm i lib-flexible --save

    2.引入lib-flexible

    在main.jsin引入

    import 'lib-flexible/flexible'
    

    3.设置meta标签

      <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0; viewport-fit=cover"
            name="viewport" />
    

    4.下载postcss-pxtorem(单位转化为 rem)

    npm install postcss-pxtorem -D
    

    5.在项目根目录中创建 postcss.config.js 文件

    module.exports = {
      plugins: {
        "postcss-pxtorem": {
          // 设计稿 375:37.5
          // 设计稿:750:75
          // Vant 是基于 375
          rootValue: 37.5,
          propList: ["*"]
        }
      }
    }
    

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 移动端适配的方案 概念: 所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示 方法一:JS动态修改配合CSS预处理器(less) // 计算屏幕宽度 var screen = document.documentElement.clientWidth; // 计算字体...
  • 移动端适配的几种解决办法

    千次阅读 多人点赞 2021-03-11 22:24:09
    所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示 原则 开发时方便,写代码时设置的值要和标注的 160px 相关 方案要适配大多数手机屏幕,并且无 BUG 用户体验要好,页面看着没有不适感 思路 写页面时,...
  • Vue —— 移动端适配

    2021-08-12 08:50:29
    因为UI页面设计PC端与移动端界面展示不同,其他页面都是相同的,所以就只写登录页面移动端适配即可。 PC端:Login.vue mounted() { if (this._isMobile()) { this.$router.replace("/mobilelogin"); } }, methods...
  • 移动端适配的几种方案 viewport即视窗、视口,用于显示网页部分的区域,在PC端视口即是浏览器窗口区域,在移动端,为了让页面展示更多的内容,视窗的宽度默认不为设备的宽度,在移动端视窗有三个概念:布局视窗、...
  • 1.项目使用vue-cli + vant+ less +axios 开发 ...假如设计稿的宽度是750px,此时1rem应该等于75px。假如量的某个元素的宽度是150px,那么在css里面定义这个元素的宽度就是 width: 2rem <header>...
  • 媒体查询移动端适配

    2021-06-07 18:48:10
    * { margin: 0; padding: 0; } html { font-size: 60px; } @media screen and (min-width:0px) and (max-width:320px) { html { ...@media screen and (min-width:321px) and (max-width:360px) { ...
  • 面试题之移动端适配

    2021-04-08 11:42:10
    移动端适配解决方案 一、 viewport(scale=1/dpr) <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;"> 各个属性的含义: ...
  • js实现移动端适配

    2020-12-31 10:13:39
    移动端适配 function resizeBaseFontSize() { var rootHtml = document.documentElement, deviceWidth = rootHtml.clientWidth; // if (deviceWidth > 640) { // deviceWidth = 640; // } root...
  • 常见的移动端适配方式 mate标签:name="viewport" content="width=device-width,initial-scale=1.0" 宽度百分比:宽度百分比,避免出现宽度溢出出现横向滚动条 rem:用rem单位来设置文字和文字周边...
  • vue 移动端适配vant

    2020-12-18 16:50:50
    下面我们分别将这两个工具配置到项目中完成 REM 适配。 一、使用 lib-flexible 动态设置 REM 基准值(html 标签的字体大小) 1、安装 npm i amfe-flexible 2、然后在 main.js 中加载执行该模块 import 'amfe-
  • 方法二:js+less适配 rem.js: (function (win) { function setUnitA() { document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + "px"; } var h = null; window.addEventListener...
  • vue+vant移动端适配

    2021-01-07 16:23:20
    方式一:使用 lib-flexible 和 px2rem-loader,遇到的坑,设计稿为750...根字体是37.5 和默认根字体75不一致,导致页面组件样式变小 https://www.cnblogs.com/yimei/p/11319657.html 2、vant+postcss-pxtorem 适配方案 ...
  • 由于移动端会自动缩放页面,所以我们需要加入meta标签,强迫页面不准缩放,进行一个1:1的显示,也就需要我们使用viewport。使用方法:输入:meta:vp 按tap 出现//content="初始缩放比例,也即是当页面第一次 load 的...
  • 关于移动端适配机型

    2021-10-27 16:43:28
  • 移动端适配方案

    2021-06-02 19:10:10
    移动端技术解决方案 移动端浏览器兼容问题 移动端浏览器基本以 webkit 内核为主,因此我们就考虑webkit兼容性问题。我们可以放心使用 H5 标签和 CSS3 样式。同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可...
  • vue- h5 移动端rem适配笔记
  • 我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端。随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem当我们采用vue-cli脚手架搭建完项目,...
  • 1.创建脚手架 例如在D盘新建名为"react"文件夹 进入到react文件夹后,搭建脚手架
  • pageResponse - 移动端适配框架HTML5学堂:移动端布局一直都是一个问题,各种各样的分辨率使得移动端的布局需要耗费大量的时间。今天介绍一个框架pageResponse.js可以让页面在各种分辨率手机下都能完全不走样。开发...
  • 上网去搜移动端适配,一定会看到下面这句代码: 先介绍一下这几个属性: 属性名 说明 width 设置layout viewport的宽度,为一个正整数,或字符串width-device initial-scale 设置页面的初始缩放值,为一个数字,可以...
  • 其他适配问题可以参考下面的文章 参考: End-------------- 全面复工啦~ 【前端适配】vw单位移动端适配方案 近些年移动端的强势崛起,导致移动端适配越来越重要,个人之前一直使用的是rem进行适配,但是发现并不是非常...
  • vue项目移动端适配rem

    2021-08-19 17:25:53
    vue项目中移动端适配 最近在写vue的移动端项目,踩了很多坑,记录一下,项目使用rem布局,使用px为单位书写,页面在浏览器渲染的时候自动转换为rem postcss-pxtorem 使用插件,用于将px单位生成rem单位 安装依赖...
  • // Vant 官方根字体大小是 37.5 propList: ['*'], selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class,不进行rem转换 } } } 3在根目录src中新建util目录下新建rem.ts等比适配文件 const baseSize = 37.5 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 34,676
精华内容 13,870
关键字:

移动端适配

友情链接: Spi-flash app.zip