精华内容
下载资源
问答
  • px转rem
    千次阅读
    2019-06-01 18:38:59

    px转换rem

    这里是750设计稿下的转换比例是1比40,即40px=1rem,
    屏幕为375宽度计算方式:40px/20/(750/375)=1rem;
    比例可自行调整

    @media only screen and (min-width: 750px) {
    	html {
    		font-size: 40px !important;
    	}
    }
    @media only screen and (min-width: 375px) {
    	html {
    		font-size: 20px !important;
    	}
    }
    
    更多相关内容
  • 主要介绍了详解react内联样式使用webpack将px转rem,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • webstorm中px转rem插件

    2018-09-28 15:56:01
    webstorm中px转rem插件 使用说明: 1.file-settings-plugins-install plugin from disk-选择生成的jar文件-restart webstorm 2.tools-SetPX2REM设置计算的比值-选中代码段,如'100px'-后,点击shift+f 3.设置界面和...
  • postcss-pxtorem 移动端px to rem 例如设计师给出640px的设计稿,写css样式的时候,就按照640px切图,单位px。 完工后,js或者css媒体查询,设定1rem的值。例如1rem == 40px。那么我们只 需要把css文件里面的px换算...
  • html5-px2rem - HTML5页面布局单位由px转换rem解决方案
  • gulp-px2rem-插件 将px转化成rem的gulp插件。 用rem来做响应式开发的时候,将px转换成rem值的时候,是每一个程序员头大的事情。 起初,我使用sublime的cssrem插件,效果挺好,避免了我重复使用小学学习的除法技能。...
  • px2rem:移动端px转rem

    2021-04-29 09:40:46
    安装npm install @oasis-games/px2rem --save-dev如何使用px2rem? /* base.js */ import px2rem from '@oasis-games/px2rem'; px2rem(640); /* *.scss */ @import "~@oasis-games/px2rem/rem.scss"; width:rem(640...
  • babel-plugin-styled-components-px2rem 插件,用于将px转换为rem单位使用处理模板字符串中的所有CSS文本。 启用选项时,添加运行时px2rem函数px2rem来处理嵌入在模板字符串中的表达式。 具有相似功能的TypeScript...
  • 安装运行npm install gulp-px2rem用法const px2rem = require ( 'gulp-px2rem' ) ;gulp . task ( 'css' , ( ) => { return gulp . src ( 'css/**/*.css' ) . pipe ( px2rem ( ) ) . pipe ( gulp . dest ( 'css' ) ) ...
  • sublime插件,一键px转rem,一键rem转px,请把文件解压至Packages目录即可使用。因rem单位每家都有自己的算法,这里是以100为换算单位
  • 主要介绍了Vue项目自动转换 pxrem的实现方法,本文是通过一系列的配置后,转换成热门,具体内容详情大家跟随小编一起通过本文学习吧
  • 在线px转rem工具代码

    2021-06-09 14:46:21
    px转rem ,部署到本地服务器即可运行。px转rembody{font-family:"\5FAE\8F6F\96C5\9ED1",Helvetica;}ul{list-style: none;}textarea{width: 532px;height: 500px;}h2{text-align: center;}.box{width: 534px;float: ...

    px转rem ,部署到本地服务器即可运行。

    px转rem

    body{font-family:"\5FAE\8F6F\96C5\9ED1",Helvetica;}

    ul{

    list-style: none;

    }

    textarea{

    width: 532px;

    height: 500px;

    }

    h2{

    text-align: center;

    }

    .box{

    width: 534px;

    float: left;

    }

    .before{

    }

    .after{

    margin-left: 200px;

    }

    .btn-group{

    position: absolute;

    width: 100px;

    top: 260px;

    left: 50%;

    margin-left: -50px;

    text-align: center;

    }

    .warp{

    position: relative;

    margin: 0 auto;

    width: 1280px;

    }

    .btn{

    display: block;

    border-radius: 3px;

    text-decoration: none;

    height: 30px;

    line-height: 30px;

    opacity: 0.9;

    }

    .btn:hover{

    opacity: 0.7;

    }

    .btn:active{

    opacity: 1;

    }

    .info{

    float: right;

    margin: 20px 0;

    }

    .form{overflow: hidden;}

    .select-screen{overflow: hidden;}

    .select-screen ul{overflow: hidden;padding: 0;margin: 0;}

    .select-screen li{ float: left;}

    .fl{

    float: left;

    }

    .fr{

    float: right;

    }

    li label{

    padding: 4px 4px;

    cursor: pointer;

    -webkit-user-select:none;

    }

    转换前的代码

    设计稿宽度

    基础字体值

    自动生成media,要兼容的分辨率:

    • 1080
    • 960
    • 800
    • 720
    • 640
    • 600
    • 540
    • 480
    • 414
    • 400
    • 375
    • 360
    • 320
    • 240

    是否要兼容IE8-

    不处理border

    转换后的代码

    @media only screen and (max-width: px), only screen and (max-device-width:px) {\n

    html,body {\n

    font-size:px;\n

    }\n

    }\n

    var cache = {};

    function $$ (id) {return document.getElementById(id) || null;}

    //����ģ��

    function tmpl(str, data) {

    // Figure out if we're getting a template, or if we need to

    // load the template - and be sure to cache the result.

    var fn = !/\W/.test(str) ?

    cache[str] = cache[str] ||

    tmpl(document.getElementById(str).innerHTML) :

    // Generate a reusable function that will serve as a template

    // generator (and which will be cached).

    new Function("obj",

    "var p=[],print=function(){p.push.apply(p,arguments);};" +

    // Introduce the data as local variables using with(){}

    "with(obj){p.push('" +

    // Convert the template into pure JavaScript

    str

    .replace(/[\r\t\n]/g, " ")

    .split("

    .replace(/((^|%>)[^\t]*)'/g, "$1\r")

    .replace(/\t=(.*?)%>/g, "',$1,'")

    .split("\t").join("');")

    .split("%>").join("p.push('")

    .split("\r").join("\\'")

    + "');}return p.join('');");

    // Provide some basic currying to the user

    return data ? fn( data ) : fn;

    }

    var base = $$('baseFont').value;

    var baseWidth = $$('baseWidth').value;

    //�Զ����cssmedai

    function createMedia() {

    var tmp = '';

    var tpl = tmpl($$('media').innerHTML);

    var screens = document.getElementsByName('screen');

    for (var i = 0; i < screens.length; i++) {

    if(!screens[i].checked) {

    continue;

    }

    tmp += tpl({

    screenWidth:screens[i].value,

    fontSize:(screens[i].value/baseWidth)*base

    });

    };

    $$('after').value = tmp + $$('after').value;

    }

    //��pxת����rem

    function changeToRem () {

    base = $$('baseFont').value;

    baseWidth = $$('baseWidth').value;

    var after = '', tmp = [],

    reg = new RegExp(":[^:]*px([^;/])*;","g"),

    before = _addSemicolon($$('before').value);

    //.replace(/\s/g,'')

    var pxArray = before.match(reg);

    if(!pxArray) { return; }

    for (var i = 0; i < pxArray.length; i++) {

    tmp = before.split(pxArray[i]);

    if($$('borderFilter').checked && _filterBorder(tmp[0])) {

    continue;

    }

    after += tmp[0];

    if($$('ie8Code').checked) {

    after += pxArray[i];

    after += tmp[0].substr(Math.max( tmp[0].lastIndexOf(';'), tmp[0].lastIndexOf('{') ) + 1);

    }

    after += getRem(pxArray[i], base);

    before = before.replace(tmp[0], '').replace(pxArray[i], '');

    }

    $$('after').value = after + before;

    createMedia();

    }

    //ĩβ�Զ���ӷֺ�

    function _addSemicolon (str) {

    var reg = new RegExp(/([0-9]+)([^;{}])?}/g);

    return str.replace(reg, "$1$2;}");

    }

    function _filterBorder(str) {

    if(str.substr(-6) === 'border'

    || str.substr(-12) === 'border-width'

    || str.substr(-10) === 'border-top'

    || str.substr(-11) === 'border-left'

    || str.substr(-12) === 'border-right'

    || str.substr(-13) === 'border-bottom'

    || str.substr(-13) === 'border-radius'

    ) {

    return true;

    }

    return false;

    }

    //remתpx

    function changeToPx () {

    var after = '', tmp = [], reg = new RegExp(":.*rem","g"), before = $$('before').value;

    var pxArray = before.match(reg);

    if(!pxArray) { return; }

    for (var i = 0; i < pxArray.length; i++) {

    tmp = before.split(pxArray[i]);

    after += tmp[0] + getPx(pxArray[i], base);

    before = before.replace(tmp[0], '').replace(pxArray[i], '');

    };

    $$('after').value = after + before;

    }

    //��ȡremֵ

    function getRem(px, base) {

    var reg = new RegExp("[0-9]+([.]{1}[0-9]+){0,1}","g"), rem = px;

    var tmp = px.match(reg);

    for (var i = 0; i < tmp.length; i++) {

    if(Number(tmp[i]) === 0 || px.indexOf( tmp[i] + 'px' ) < 0) {

    continue;//0��������,���ֺ��治��px��������

    }

    rem = rem.replace(tmp[i] + 'px', (Number(tmp[i]) / base) + 'rem');

    }

    return rem;

    }

    //��ȡpxֵ

    function getPx(rem, base) {

    var reg = new RegExp("[0-9]+([.][0-9]+)?","g"), px = rem;

    var tmp = rem.match(reg);

    for (var i = 0; i < tmp.length; i++) {

    px = px.replace(tmp[i] + 'rem', (Number(tmp[i]) * base) + 'px');

    };

    return px;

    }

    $$('mediaCheck').addEventListener('click', function() {

    var screens = document.getElementsByName('screen');

    if(this.checked) {

    _changeChecked(true);

    } else {

    _changeChecked(false);

    }

    function _changeChecked(op) {

    for (var i = 0; i < screens.length; i++) {

    screens[i].checked = op;

    };

    }

    });

    展开全文
  • } 使用时调用函数 要看设计稿尺寸哦,看设置的根元素为多少,例设置设备宽度为750,根元素字体为75,但我们设计稿为375的话,就要把px*2传进去~ 如果是 width: 45px 改成rem为 width:px2rem(90) 2.安装插件 直接...

    .比如设计稿是750px,假设根元素字体大小设置为100px,则1rem = 100px;所以为了适应各种屏幕尺寸:一般设置根元素font-size 为 屏幕宽度/UI设计图宽度 *100+‘px’,这也相当于1rem对应的px尺寸。可配合媒体查询@media来设置。用的时候除以100,10px = 0.1rem

    1.直接在scss文件中使用函数

    定义函数

     @function px2rem($px) {
       @return $px / 75 * 1rem;
     }
    

    使用时调用函数

    要看设计稿尺寸哦,看设置的根元素为多少,例设置设备宽度为750,根元素字体为75,但我们设计稿为375的话,就要把px*2传进去~

    如果是 width: 45px
    改成rem为
    width:px2rem(90)
    

    2.安装插件
    直接安装postcss-pxtorem插件,在postcss-loader中postcss-scss选项中配置

    注:px2rem中的exclude选项两边不能带引号,项目路径要用正则表达式表达,多个选项之前用"|"隔开。

    例: pc/index/guide要使用pc(\|/)index(\|/)guide

     {
          loader: 'postcss-loader',
          options: {
            parser: 'postcss-scss',
            plugins: () => [
              autoprefixer({
                broswers: ['last 5 versions', '> 0.05%'],
                remove: false,
              }),
              require('postcss-pxtorem')({
                rootValue : 37.5,
                selectorBlackList  : [], //过滤
                propList   : ['*'],
                 // 规则是class中包含的字符串,如vux中所有的class前缀都是weui-。也可以是正则。
                // exclude: /node_modules/i ,
                // exclude: /packages(\\|\/)detail/i ,
                // exclude: /node_modules|pc(\\|\/)index(\\|\/)guide/i ,
            ],
          },
        },
    
    

    3.vscode插件 px to rem & rpx(cssrem)
    这款插件会自动把px转换成rem,在vscode 插件扩展里我们设置好根字体设计稿尺寸等
    在这里插入图片描述

    然后我们写px的时候屏幕上会自动出现 rem的选项,这时候我们点击一下就可以啦,这样也可以实现等比缩放了!
    在这里插入图片描述

    最后为了我们改变窗口大小或者在多个不同分辨率的屏幕上移动,我们还要写个window.resize()方法

    export const setRem = () => {
      const baseSize = 75;
      function resizeRem() {
        const scale = document.documentElement.clientWidth / 750;
        document.documentElement.style.fontSize = `${baseSize * scale}px`;
      }
      resizeRem();
      window.onresize = function () {
        console.log('onresize');
        resizeRem();
      };
    };
    
    展开全文
  • 为了保证网页的响应式设计,我们在H5开发中用的单位一般都是rem,怎么在WebStorm中设置自动将px转换rem呢?非常简单,只需要安装一个插件即可。 步骤:WebStorm ——> Preferences ——> Plugins选中...

    为了保证网页的响应式设计,我们在H5开发中用的单位一般都是rem,怎么在WebStorm中设置自动将px转换rem呢?非常简单,只需要安装一个插件即可。

    步骤:
    WebStorm ——> Preferences ——> Plugins
    选中Marketplace,搜索idea px 2 rem,点击安装,然后重启WebStorm

    在代码中选中xx px,MAC电脑按快捷键option + d,Windows 为alt + d,则可以实现自动将xx px转换为xx rem

    展开全文
  • vue中px转rem教程

    2021-08-04 18:43:41
    安装px2rem-loader(devDependencies) npm install px2rem-loader -D 移动端适配解决npm包 "lib-flexible" (dependencies) npm install lib-flexible -D ​ 此时下载的插件其实可以用来,但是px2rem-loader...
  • 1.安装postcss-pxtorem postcss-pxtorem是Postcss的插件,所以同时也要安装Postcss postcss-pxtorem使用更高版本可能会导致Error: PostCSS plugin postcss-pxtorem requires PostCSS 8. 这里使用了5.1.1可以避免这...
  • px2rem-loader 需要与 flexible 配合使用,不然px2rem仅仅只是rem却不会设置rem的信息 安装 flexible npm i lib-flexible -S 然后在main.js中引入 import 'lib-flexible/flexible' 直接引入的文件需要有优先与...
  • 1、安装px2rem插件 npm add postcss-px2rem 2、配置 (1)在src下的utils目录中新建px2rem.js文件(没有utils就新建一个) px2rem.js // 基准大小 const baseSize = 16 // 设置 rem 函数 function setRem() { // ...
  • 新版react中px转rem

    千次阅读 2022-03-14 18:01:08
    1.安装postcss-pxtorem npm i lib-flexible postcss-pxtorem -s 2.在src目录下index.js里引入lib-flexible import "lib-flexible"; 3.修改webpack.config.js(这个文件在node_modules文件夹下的react-scripts...
  • vue工程实现px转rem 使用px单位在不同宽高比设备上显示样式比例有差异,rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。可以使用rem实现自适应。 postcss-px2rem:是...
  • 查询多方资料,亲测有效。 红色圈起来的是文件路径。 用法是: exclude(String, Regexp, Function)要忽略并保留为px的文件路径。...如果value是字符串,它... /exclude/i将匹配\project\postcss-pxtorem\exclude...
  • Vue移动端项目中px转rem的两种方法

    千次阅读 2021-12-15 20:26:27
    1)使用lib-flexible动态设置REM基准值(html标签的字体大小) 安装依赖 yarn add amfe-flexible // 或者 ...2)使用postcss-pxtorempx转为rem。 安装依赖 yarn add postcss-pxtorem -D // 或者
  • 需要你手动修改一下设计的分辨率尺寸,setRem函数会自动根据当前屏幕大小和设计分辨率大小的比例进行rem转换。 代码: const baseSize = 50 // 设置 rem 函数 function setRem() { // 当前页面宽度相对于 750 宽...
  • 将字符串中的px单位转换为rem单位做移动端适配 /** * @description: 正则表达式匹配 px 像素单位转换为 rem * @params : str 字符串,width 基数 */ export const pxToRem = (str, width = 37.5) => { var ...
  • vue项目中px转rem方法(pc端)

    千次阅读 2022-03-19 17:25:18
    npm install postcss-px2rem npm install px2rem-loader 安装好了之后新建一个文件 postcss.config.js 文件内容如下 // postcss.config.js 文件 module.exports={ plugins:[ require("postcss-px2rem")({ ...
  • // 表示1920的设计图,使用100PX的默认值 var bodyWidth = document.body.clientWidth;// 当前窗口的宽度 var rem = bodyWidth * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值 doc
  • React 配置px转rem

    2021-09-01 14:09:44
    1、npm run eject 暴露配置文件由于react默认隐藏webpack配置需要手动显示。首先执行命令显示webpack配置 执行命令:npm run eject 将config文件夹显示出来 ...npm install lib-flexible postcss-pxtorem -S ...
  • 2、在 config 文件夹中创建 rem.js: 3、将以下代码复制到 rem.js 中: // 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。 ...
  • px转rem小工具 功能介绍 可以将你的css / less / sass样式文件中的px单位自动转换成rem单位 使用说明 首先,你要安装node环境,该工具是基于node环境下运行 然后,打开根目录下的index.js文件 // 参数10代表:1rem =...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 62,993
精华内容 25,197
关键字:

px转rem

友情链接: BIN.ZIP