精华内容
下载资源
问答
  • 移动端rem适配
    2022-06-12 18:11:07

    rem 根元素的像素

    根元素.fontSize 就是rem 

    <body>
      <script>
          let docEle = document.documentElement;//获取跟元素
          function setRemUnit(){
             docEle.style.fontSize = docEle.clientWidth/10+'px'
          }
          setRemUnit();
          window.addEventListener('resize',setRemUnit)
      </script>
      <div id='root'></div>
    </body>

    px2rem-loader

    更多相关内容
  • 移动端 REM 适配

    2022-03-07 20:55:03
    在使用 vant 完成移动端项目时, 如果需要使用 rem 单位实现适配 ( Vant 中的样式默认使用 px 单位), 推荐使用lib-flexible (设置 rem 基准值)和postcss-pxtorem (将单位转化为 rem ) 一、使用 lib-flexible动态设置...

    在使用 vant 完成移动端项目时, 如果需要使用 rem 单位实现适配 ( Vant 中的样式默认使用 px 单位), 推荐使用 lib-flexible (设置 rem 基准值)  postcss-pxtorem (将单位转化为 rem )

    一、使用 lib-flexible 动态设置 REM 基准值(html 标签的字体大小)

    安装:  yarn  add  amfe-flexible

    导入:  在 main.js 文件中执行模块   import  'amfe-flexible'

    二、使用 postcss-pxtorempx 转为 rem

    安装:  yarn  add  postcss-pxtorem@5.1.1  -D

    配置: 

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

    module.exports = {
      plugins: {
        //  自动添加浏览器前缀的 PostCss 插件
        'autoprefixer': {
          //  browsers 用来配置兼容的浏览器版本信息
          browsers: ['Android >= 4.0', 'iOS >= 8']
        },
        // postcss-pxtorem 插件的版本需要 >= 5.0.0
        'postcss-pxtorem': {
          rootValue({ file }) {  // 如果是vant的就按照375 尺寸, 如果是其他的(二倍设计图)就是按照750
            return file.indexOf('vant') !== -1 ? 37.5 : 75;  // rootValue 的值一般是设计稿1/10
          },
          propList: ['*'],
        },
      },
    };

    rootValue :  表示根元素字体大小, 会根据更元素大小进行单位转换

    propList :  用来设定可以从px 转为 rem 的属性  //  * 表示所有属性都要转换

    VueCLI 内部已经配置了 autoprefixer 插件, 无需再配, 再配会产生冲突

    //  该插件无法转换行内样式中的 px

    配置完, 重启服务器

    展开全文
  • 移动端rem适配

    2021-09-12 15:26:24
    一、为什么要rem适配 如果不对各种不同分辨率的设备进行适配,移动端界面样式就会乱掉。 二、rem适配方法 要借助两个工具 1.lib-flexible 2.postcss-pxtorem 三、具体操作 首先安装lib-flexible 执行 npm i amfe-...

    一、为什么要rem适配
    如果不对各种不同分辨率的设备进行适配,移动端界面样式就会乱掉。
    二、rem适配方法
    要借助两个工具
    1.lib-flexible
    2.postcss-pxtorem
    三、具体操作
    首先安装lib-flexible
    执行

    npm i amfe-flexible
    

    安装后main.js中引入

    import 'amfe-flexible'
    

    然后安装postcss-pxtorem

    npm install postcss-pxtorem -D
    

    项目根目录下新建postcss.config.js文件,将下面代码复制到刚刚新创建的文件中

    module.exports = {
      plugins: {
    		  
    	  autoprefixer:{
    		  overrideBrowserslist:['Android>=4.0','iOS>=8'],
    	  },
        'postcss-pxtorem': {
          rootValue: 37.5,
          propList: ['*'],
        },
      },
    };
    

    上面操作完成后重新启动项目
    补充:如果报错“ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”
    解决方法,分两步
    1.执行npm uninstall post-pxtorem
    2.执行npm i postcss-pxtorem@5.1.1

    展开全文
  • 移动端 Rem 适配

    2020-12-22 17:57:29
    移动端 Rem 适配 适配的概念:实现页面在不同设备上等比, 也就是说 改变了一个元素在不同设备上占据 css 像素的个数 打个比方,比如说页面上有一个盒子,占移动端设备宽度的 50% ,在改变移动端设备的情况,把盒子...

    移动端 Rem 适配

    适配的概念:实现页面在不同设备上等比, 也就是说 改变了一个元素在不同设备上占据 css 像素的个数

    打个比方,比如说页面上有一个盒子,占移动端设备宽度的 50% ,在改变移动端设备的情况,把盒子由 iphone 6 的 375 px (css 像素)设备宽度的,放到 6 plus 414px(css 像素) 设备宽度的屏幕下,两个盒子仍然占据设备宽度的 50%

    先要明白两个单位 em 和 rem:

    在 PC 端浏览器下(以谷歌浏览器为主),字体的默认大小是16px,字体最小为12px 。 但是在移动端下字体没有默认大小。

    em

    相对于自身的 font-size 大小 比如 :1em = 16px

    rem

    相对于 html 根标签的 font-size 大小

    因此可以利用 获取设备 视口宽度 的方式来做移动端适配

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <!-- 完美视口 -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <title>rem</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .box {
          width: 8rem;
          height: 8rem;
          background-color: #f60;
        }
      </style>
    </head>
    <body>
      <div class="box">test</div>
    </body>
    <script>
      let html = document.querySelector('html')
      // 1rem = html.style.fontSize
      // 布局视口的宽度就为 16rem
      // 设计图的宽度为750px (以iphone6为准) ,其实就是16rem
      html.style.fontSize = document.documentElement.clientWidth/16 + 'px'
    </script>
    </html>
    

    获取视口宽度为 750px , 此时 1rem = 750px; 除以16则为:视口宽度为 1rem = 750/16 + ‘px’;

    但是上面的方法是有缺陷的,由于权重比较低,所以 font-size 的属性会被改变; 因此我们会想到 给属性加 !important 增加权重,但是 !important 是作为 css 属性,它并不能在标签中使用,所以就有了下面的方案。

    创建一个style标签,然后给标签添加 HTML 属性 font-size 来设置字体大小

    完美方案

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <!-- 完美视口 -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <title>rem</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .box {
          width: 8rem;
          height: 8rem;
          background-color: #f60;
        }
      </style>
    </head>
    <body>
      <div class="box">test</div>
    </body>
    <script>
      // 先创建一个style标签
      // 给标签添加内容,内容就为根标签的字体大小
      // 然后将创建的style标签放到head标签中
      (function () {
        let styleNode = document.createElement('style')
        let width = document.documentElement.clientWidth/16
        styleNode.innerHTML = "html {font-size: "+ width +"px !important}"
        document.head.appendChild(styleNode)
      })()
    </script>
    </html>
    

    两次结果均如下图所示:

    在这里插入图片描述

    Rem适配的优缺点

    • 优点: 不会破坏完美视口
      // 完美视口
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    • 缺点: px 的值到 rem 的值转换太过复杂
    展开全文
  • flexible.js实现移动端实现移动端rem适配方案适配方案需要了解的基础知识:需要了解的基础知识:物理像素:物理像素又被称为设备像素,他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色...
  • 移动端rem适配原理

    2022-03-31 12:58:50
    计算原理 比例=设计稿/100 相当于设计稿 分成100分 ...那么3.75化作rem, 3.75rem=375px的设计稿 设备尺寸 设计稿尺寸 比例 公式 n=根字体大小 320 375 100 320/375=n/100 85px 375 375 100 375/375=n/100 100px 414
  • 移动端rem适配方案

    2021-12-22 15:46:42
    适配方案有很多,rem方案使用了很久了,一直没有记录,今天记录一下。 原理: 通过根据屏幕尺寸,成比例改变html的font-size实现适配。 优化: 1.大家好多使用媒体查询改变html的font-size比较死板,遇到一些...
  • vue移动端rem适配

    2021-10-21 12:27:01
    // public/js/rem.js function remSize() { // 获取屏幕宽度 var deviceWidth = document.documentElement.clientWidth || window.innerWidth if(deviceWidth>=750) { deviceWidth = 750 } if(deviceWidth&...
  • 下面我们分别将这两个工具配置到项目中完成 REM 适配。 (1)使用 lib-flexible 动态设置 REM 基准值(html 标签的字体大小) 安装依赖: # yarn add amfe-flexible npm i amfe-flexible 然后在 mai
  • H5移动端rem适配

    2021-07-30 15:03:28
    一、安装 npm lib-flexible --save 二、main.js中全局引入 import “lib-flexible” 三、vue.config.js中配置 module.exports = { ... require('postcss-px2rem')({ remUnit: 37.5 }) ] },
  • vue中做移动端Rem适配

    2021-12-22 17:36:38
    Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具: postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem lib-flexible 用于设置 rem 基准值 一、使用 lib-...
  • Vue-移动端rem适配

    2021-09-17 15:57:11
    1、rem 使用 rem 单位可以让设计更加灵活,能够控制元素整体放大缩小,而不是固定大小。rem单位基于 html 元素字体大小, 2、适配工具 ...到此,我们已经算是完成移动端适配了; 我们先来看看lib-fl
  • 5分钟带你看懂:vue项目的移动端rem适配
  • 1、安装 npm install lib-flexible postcss-pxtorem -S 2、在项目入口文件index.js中引入lib-fiexible import 'lib-flexible'; 3、修改 webpack.config.js 3.1、初始化配置 npm run eject 3.2、此时会报错 解决方案...
  • 移动端rem适配实现自适应(以下案例以750px为标准) 1.设置根元素大小,然后以rem为单位(root em),rem的基准是相对于html元素的字体大小 ,使用方法如下 <!DOCTYPE html> <html lang="en"> <head...
  • vant移动端rem适配

    2022-05-11 20:14:10
    如果需要使用 rem 单位进行适配,推荐使用以下两个工具: - postcss-pxtorem 是一款 PostCSS 插件,用于将 px 单位转化为 rem 单位 - lib-flexible 用于设置 rem 基准值
  • 主要介绍了vue使用rem实现 移动端屏幕适配的相关知识,通过实例代码介绍了vue用rem布局的实现代码,需要的朋友可以参考下
  • vue如何实现移动端rem适配

    千次阅读 2019-11-29 14:59:43
    在自己的项目中新建一个叫utils的文件夹,里面新建一个rem.js,一般utils文件夹都是存放公用方法的,在rem.js写: (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in...
  • 移动端rem适配,lib-flexible适配,移动适配,rem适配,移动端适配
  • 移动端REM适配

    2021-12-14 15:14:13
    1.PostCss-Pxtorem 配置 yarn add -D postcss-pxtorem // -D就是保存为开发依赖 2.创建 postcss.config.js 是PostCSS 的配置文件 module.exports = { plugins: { autoprefixer: {}, 'postcss-pxtorem': { /...
  • 一、使用 lib-flexible 动态设置 REM 基准值(html 标签的字体大小) ...二、使用 postcss-pxtorem 将 px 转为 rem 1、安装 # yarn add -D postcss-pxtorem # -D 是 --save-dev 的简写 npm install postcss-pxt
  • 移动端rem适配(只需三个步骤)

    万次阅读 2019-05-10 13:52:19
    开始前:一定要记住,在iphone5下,1rem=16px; 图示: 下面开始三个步骤: 1.获取html的宽 操作代码: let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;//有些浏览器...
  • 移动端rem适配方案(flexible.js)

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,760
精华内容 5,104
关键字:

移动端rem适配