精华内容
下载资源
问答
  • pc端rem适配
    2022-05-12 14:50:59

    安装

    npm install lib-flexible --save
    npm install postcss-px2rem --save
    

    main.js

    import 'lib-flexible'
    

    node_modules / lib-flexible / flexible.js

    // 找见这个函数,把 540 改成 width
    function refreshRem(){
         var width = docEl.getBoundingClientRect().width;
         if (width / dpr > 540) {
              // width = 540 * dpr;
              width = width * dpr;  // 把 540 改成 width
          }
          var rem = width / 10;
          docEl.style.fontSize = rem + 'px';
          flexible.rem = win.rem = rem;
     }
    

    config.js

    module.exports = {
        css: {
            loaderOptions: {
                css: {},
                postcss: {
                    plugins: [
                        require("postcss-px2rem")({
                            remUnit: 192  // 如果设计稿是1920 这⾥就是192
                        })
                    ]
                }
            }
        },
    };
    
    更多相关内容
  • PC端网站 rem适配方案

    2021-11-24 16:07:01
    1、使用sass语法 转换px rem , vscode编辑器安装插件easy-scss 安装之后打开插件setting.json, 在setting.json里配置转换后css的路径 “easysass.targetDir”: “./css” 创建css文件、scss文件: 项目中如何...

    以1920设计稿为准
    1、使用sass语法 转换px rem , vscode编辑器安装插件easy-scss
    安装之后打开插件setting.json, 在setting.json里配置转换后css的路径 “easysass.targetDir”: “./css”
    在这里插入图片描述
    创建css文件、scss文件:
    在这里插入图片描述
    项目中如何使用index.scss文件:
    $yellow: yellow;
    $theme: blue;
    $orange: orange;
    $red: red;

    // PX 转 rem
    @function px2Rem($px, KaTeX parse error: Expected '}', got 'EOF' at end of input: … @if (unitless(px)) {
    //有无单位
    @return (KaTeX parse error: Expected 'EOF', got '}' at position 24: …2) * 1rem; }̲ @else if (unit…px) == em) {
    @return KaTeX parse error: Expected 'EOF', got '}' at position 9: px; }̲ @return (px / $base-font-size) * 1rem;
    }

    .nav p{
    font-size: px2Rem(12px);
    color: $red;
    }

    easy-scss 自动编译后的index.css:
    .nav p {
    font-size: 0.66667rem;
    color: red;
    }

    2、设置媒体查询
    @media screen and (max-width: 1920px) {
    html {
    font-size: 19.2px;
    }
    }
    @media screen and (max-width: 1680px) {
    html {
    font-size: 16.8px;
    }
    }
    @media screen and (max-width: 1380px) {
    html {
    font-size: 14.4px;
    }
    }
    @media screen and (max-width: 1300px) {
    html {
    font-size: 12.8px;
    }
    }

    3、代码热更新插件:Liver Serve (写完后页面会自动更新,不用再刷新了)
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • vue实现PC端rem自适应适配

    千次阅读 2021-08-09 22:18:23
    px转rem:px2rem,它有webpack的loader px2rem。 开始: 使用npm 安装 lib-flexible和px2rem-loader npm i lib-flexible -S npm i px2rem-loader -D 安装好了之后还需要在项目的入口文件 mai...

    项目基础配置使用 vue-cli2 生成
    自适应方案核心: 可伸缩布局方案 lib-flexible。
    px转rem:px2rem,它有webpack的loader px2rem。

    开始:

    使用npm 安装 lib-flexible 和 px2rem-loader

    npm i lib-flexible -S
    npm i px2rem-loader -D

    安装好了之后还需要在项目的入口文件 main.js 里引入 lib-flexible。 

    import 'lib-flexible'

     接下来为了验证 lib-flexible 是否生效,可以将app.vue中的内容改成:

    <template>
      <div class="wrapper">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
      </div>
    </template>
    
    <style>
    	* {
    	  margin: 0;
    	  padding: 0;
    	}
    </style>
    
    <style scoped>
    	.wrapper div {
    	  height: 1rem;
    	}
    	.box1 {
    	  width: 2rem;
    	  background-color: coral;
    	}
    	.box2 {
    	  width: 4rem;
    	  background-color: skyblue;
    	}
    	.box3 {
    	  width: 6rem;
    	  background-color: palegreen;
    	}
    	.box4 {
    	  width: 8rem;
    	  background-color: wheat;
    	}
    	.box5 {
    	  width: 10rem;
    	  background-color: darkred;
    	}
    </style>

     

    注意:在实际开发中,我们通过设计稿得到的单位是px,所以要将px转换成rem再进行样式中。但如果都需要手动转的话,就很麻烦,所以需要一个工具替我们完成这项工作,这个时候就需要配置px2rem了,当然,编辑器可能也要对应的插件。

    在 vue-cli 生成的 webpack 配置中,vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。我们只需在 cssLoader 后再加上一个 px2remLoader 即可,px2rem-loader 的 remUnit 选项意思是 1rem=多少像素,结合 lib-flexible 的方案,我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10,这里我们假设设计稿宽为 1920px。

    //utils.js
    const cssLoader = {
      loader: 'css-loader',
       options: {
         sourceMap: options.sourceMap
       }
     }
    
     const px2remLoader = {
       loader: 'px2rem-loader',
       options: {
         remUnit: 192
       }
     }
     //...

     放进loaders数组中:

    //utils.js
    function generateLoaders (loader, loaderOptions) {
       const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    
       if (loader) {
         loaders.push({
           loader: loader + '-loader',
           options: Object.assign({}, loaderOptions, {
             sourceMap: options.sourceMap
           })
         })
       }

     修改配置以后重启服务器,将原来app.vue文件中的样式改成:

    <style scoped>
    .wrapper div {
      height: 1rem;
    }
    .box1 {
      /* 750 * 20% */
      width: 150px;
      background-color: coral;
    }
    .box2 {
      /* 750 * 40% */
      width: 300px;
      background-color: skyblue;
    }
    .box3 {
      /* 750 * 60% */
      width: 450px;
      background-color: palegreen;
    }
    .box4 {
      /* 750 * 80% */
      width: 600px;
      background-color: wheat;
    }
    .box5 {
      /* 750 * 100% */
      width: 750px;
      background-color: darkred;
    }
    </style>

    可以看到,适配依然生效。

    以上是vue-cli2配置px2rem的方式,
    如果脚手架用的是vue-cli3的话,由于vue-cli3 生成的目录结构没有build文件,所以在配置上也有一些不同。
    vue-cli3配置方式:
    找到文件 node_modules/@vue/cli-service/lib/config/css.js,添加规则:

     config.module
            .rule('css')
            .test(/\.css$/)
            .oneOf('vue')
            .resourceQuery(/\?vue/)
            .use('px2rem')
            .loader('px2rem-loader')
            .options({
              remUnit: 75
            })

    remUnit的值请自行修改。

    但是有一个问题,我明明设置的宽度是按1920来的,为什么计算出来1rem=54px?

     是不是插件哪里出了问题,或者在哪里定义过跟54或者540相关的东西?
    (我这里全局搜索了54找到flexible.js文件)
    找到flexible.js文件看下:

    找到问题了就解决问题,既然文件把屏幕宽度写死了,那就不写死: 

    function refreshRem(){
          var width = docEl.getBoundingClientRect().width;
          if (width / dpr > 540) {
              width = width * dpr;
          }
          var rem = width / 10;
          docEl.style.fontSize = rem + 'px';
          flexible.rem = win.rem = rem;
      }

    重启项目,看一下运行结果:

    展开全文
  • 一、rem转换公式 元素rem = 元素px/(设计稿的宽度/划分的份数)=元素px/html的font-size大小; 二、适配原理 将屏幕划分10等份(所以公式中的划分份数就是10),通过设置html根元素的字体大小对页面进行等比缩放; 三...

    环境

    • win10
    • vue2.0
    • vscode

    一、rem转换公式

    元素rem = 元素px/(设计稿的宽度/划分的份数)=元素px/html的font-size大小;

    二、适配原理

    将屏幕划分10等份(所以公式中的划分份数就是10),通过设置html根元素的字体大小对页面进行等比缩放;

    三、适配步骤

    1. 安装:下载解压flexible压缩包
    2. 配置
    • 在vue项目的src目录下新建js文件夹,将lib-flexible-2.0文件夹下的index.js复制粘贴进去;
    • 在vue的src目录下的main.js中引入index.js
    import "./js/index.js"
    
    1. 修改body样式:在css文件夹下建立全局样式global.css,填入:
    body {
      width:10rem;
      max-width:1920px;//屏幕最大尺寸:设计稿的宽度
      min-width:320px;//屏幕最小尺寸
      margin:0 auto;
      line-height:1.5;
      background-color: rgb(32, 33, 54);
    }
    
    1. 安装px–>rem插件
    • 第一款 px to rem:安装配置后选中带有px单位的数值是用Alt+z快捷键一键转换px单位为rem单位
      在这里插入图片描述
      在这里插入图片描述

    • 第二款 cssrem:边写代码便转换单位,安装后需要重启vscode
      在这里插入图片描述

    至此,就可以实现rem适配了。页面会随着屏幕的大小等比缩放

    公式计算详解:b站pink老师的课程第453集“rem最终适配方案”

    2022年5月11日更新:

    由于viewport单位得到众多浏览器的兼容,lib-flexible这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一定的问题。建议大家开始使用viewport来替代此方。

    viewprot替换步骤:https://juejin.cn/post/6961658865876205576

    展开全文
  • PC端如何设置rem屏幕适配

    千次阅读 2022-01-18 09:29:20
    目前我们做的这个PC端后管项目需要做适配,如果没有做适配的话,在缩放的时候会出现布局错位的问题,解决方法如下:
  • pc端使用rem适配

    2021-06-17 05:30:55
    $(function(){var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值var wH = window....// 当前窗口的宽度var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值$('html'...
  • 2.vue cli2.0和3.0创建的项目,有差异,需要不同的配置来使用px2rem,使用vue cli2.0创建的项目,按照上面大佬的配置 就可以了。 3.如果是vue cli3.0创建的项目,请参照下面这位大佬。 4.按照大佬的教程,重新配置--...
  • vue项目pc端使用rem进行适配 (lib-flexible+postcss-pxtorem
  • pc端自适应——rem

    千次阅读 2020-12-22 11:21:10
    遇到项目需求变更,需要自适应4:3主流屏幕,于是采用了rem,和动态js计算根元素。1.remrem是指相对于根元素字体大小的单位,一个相对单位。rem可以做到随着根元素的字体大小随之变化,达到自适应屏幕的效果。2.步骤...
  • 自适应PC端网页制作使用REM

    千次阅读 2020-12-31 03:27:06
    做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080使用了几种办法1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容...
  • 浅谈pc端rem字体设置的问题

    千次阅读 2020-12-22 11:21:08
    这样一来,在不同大小屏中,内容总是在中间,看起来较正常2、长,宽,LEFT,TOP,RIGHT,BOTTOM都采用了REM,并且HTML的FONT-SIZE设置的是100PX一是觉得计算方便,二是如果设为10PX,谷歌会不兼容.此时BODY的FONT-...
  • PC端适配(使用rem进行开发)

    千次阅读 2021-09-24 14:08:07
    let designSize = 1920; // 设计图尺寸 ... // 浏览器宽度 let rem = window.screen.width * 10 / designSize; document.documentElement.style.fontSize = rem + 'px'; } $(window).resiz.
  • vue实现pc端的自适应,rem适配

    千次阅读 2020-07-14 17:44:23
    项目构建:基于vue-cli3构建,使用postcss-px2rem px2rem-loader进行rem适配 实现原理:每次打包,webpack通过使用插件postcss-px2rem,帮我们自动将px单位转换成rem单位 前方有坑:UI框架部分组件使用JavaScript将...
  • 做一个PC端的网页,设计图是1920X1080,要在常见屏上显示正常 ,比如:1280X720 1366X768 1440X900 1920X1080。就要使用REM,width、height、margin、padding、left、top都采用了REM,**注意:**HTML的FONT-SIZE设置...
  • 使用rem布局。首先引入flexible.js,如果是vue项目可以使用npm下载。 修改flexible.js中对屏幕分数的划分,这里设置为24份。(份数并不固定,这里是默认按1920px宽的分辨率进行设定)。 默认屏幕宽为1920px,...
  • 项目构建:基于vue-cli3构建,使用postcss-px2rem px2rem-loader进行rem适配 实现原理:每次打包,webpack通过使用插件postcss-px2rem,帮我们自动将px单位转换成rem单位 前方有坑:UI框架部分组件使用...
  • PC端各分辨率适配

    千次阅读 2020-12-22 11:21:13
    最近在写一个PC端的运动页面,行将落成的时刻,增加了个需求,想让页面适配差别的区分率,既然提出了如许的需求,那末我们就要去只管满足。之前一直写的是牢固版心,然后在将容器居中,如许写的话,就致使页面在低...
  • 安装lib-flexible,postcss-pxtorem yarn add lib-flexible yarn add postcss-pxtorem 配置postcss-pxtorem 在根目录下建立postcss.config.js文件 const pxtorem = require("postcss-pxtorem"); module.exports = {...
  • vue2,rem适配PC端

    2022-08-09 08:37:36
    vue2,rem适配PC端
  • pc端 移动端适配rem插件方式

    千次阅读 2022-02-15 13:40:27
    PC端 , 移动端适配
  • PC端使用rem进行适配(lib-flexible和postcss-pxtorem
  • Vue pc端适配插件——postcss-px2rem

    千次阅读 2022-05-12 11:25:57
    尤其在润工作pc端,窗体较小,显示看起来就会比较拥挤,之前的处理方法是在最外层元素上获取屏幕分辨率来动态进行缩放,但是后期加入视频插件后,视频播放的进度条受到外层的缩放影响导致进度点击不准确,音量进度条...
  • px转rem:px2rem,它有webpack的loader px2rem 开始 先使用vue脚手架初始化一个webpack项目 vue init webpack 项目名 项目初始化好了之后,进入项目目录中 (cd 项目名) 安装 lib-flexible 和 px2rem-loader npm i...
  • 主要介绍了手机rem+scss做适配的详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • rem适配计算

    千次阅读 2022-04-07 15:37:13
    @function rem($n){ @return $n/(200)+rem; } 新建common.scss文件 html{ font-size:calc(100vw/1.875) } 这个表达式的理解: 100vw是设备视口的总宽度,18.75是计算1rem=400px,即750px/400px=1.875 实际...
  • 原生html-pc端项目rem+flexible.js屏幕适配-同时适用于移动端,我是小董,一个入行没多久没啥经验的小前端~
  • PC端页面适配px转rem

    2021-08-04 15:54:45
    rem是相对长度单位,页面布局需要在不同比例的pc端显示同样大小的页面,不希望在分辨率比较高的屏幕上页面就很小。 一般设计稿都是px单位,在开发的时候也会用到px单位。如果在开发前,可以利用vscode的cssrem插件边...
  • 详解rem 适配布局

    2020-09-22 12:24:00
    当今手机种类繁多,所以不可能每一款手机都要写一套布局样式,rem 就是用来自适应布局的,本文就详细的介绍了rem 适配布局,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • PC与移动端rem适配实现
  • 2.安装 px2rem-loader npm install px2rem-loader --save-dev 3.在main.js中引入lib-flexible import 'lib-flexible' 4.配置 px2rem-loader(我的是vue-cli 3.x,需要自己配置,在项目根目录新建文件vue.config....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,643
精华内容 2,257
关键字:

pc端rem适配

友情链接: main.rar