webpack 其他rem 字体px - CSDN
精华内容
参与话题
  • 字体大小的控制也有px、百分比、rem等单位,这篇文章来回顾下webpack中关于pxrem。 1 安装依赖包 npm install postcss-pxtorem --save-dev 2 创建 .postcss.js文件,做webpack相关配置 配置...

    移动盛行的时代,越来越多的手机型号要求我们在制作嵌入h5的时候去适配不同的手机。适配有多重模式,就像布局有flex、百分比等。字体大小的控制也有px、百分比、rem等单位,这篇文章来回顾下webpack中关于px转rem。

    1 安装依赖包   npm install postcss-pxtorem --save-dev

    2 创建 .postcss.js文件,做webpack相关配置

    配置项

    autoprefixer: 添加浏览器前缀

    postcss-pxtorem:{

     rootValue:750;    根大小750

    propList:[]  属性的选择器,*表示通用

    selectorBlackList:[]    忽略的选择器   .ig-  表示 .ig- 开头的都不会转换

    }

    展开全文
  • 部分代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &...q

    rem是CSS3新增的一个相对单位(root em,根em)。这个单位与em的区别在于rem相对的是HTML根元素。

    export default class Rem {
        static init(){
        	//设置默认尺寸
            Rem.defaultStyle();
            //缩放后,重新计算html字体大小
            Rem.resizeHandler();
            //监听浏览器缩放事件
            window.addEventListener("resize", Rem.resizeHandler);
        }
        //计算html字体大小
        static resizeHandler() {
            let contW = Math.floor(document.documentElement.clientWidth);
            let fontS = (contW / screen.width) * 100;
            document.documentElement.style.fontSize = fontS + "px";
        }
        //设置html默认字体为100px body字体为16px
        static defaultStyle(){
            document.documentElement.style.fontSize = "100px";
            document.body.style.fontSize = "16px";
        }
        //px 转换成 rem
        static getRem(size) {
            var fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
            return size / fontSize;
        }
    }
    
    

    vw/vh方案计算方便,能够很好地实现适配效果,但是存在一定的兼容问题,将vw/vh方案和rem方案相结合,设置html元素的font-size单位为vw,然后在布局中直接使用rem单位。

    例如,设计稿的宽度为750px,则1vw=7.5px,为了方便计算,我们将html元素的font-size大小设置为100px,也就是13.333vw=100px。

    html{font-size:13.333vw}
    

    设置html{font-size:13.333vw},在样式代码中1rem=13.333vw=100px,即1rem等于设计稿上的100px,使用的时候除以100,直接小数点向左移动2位,1rem等于100px,那么10px就是0.1rem。

    想用相对单位就写rem,想用绝对单位就写px,不需要其他的设置。

    这种方案的优点:从rem方案过渡到vw,只是需要通过改变根元素字体大小的计算方式,将单位改成vw,不需要其他处理。

    这种方案的缺点:这种方案只对手机的兼容性很好,ipad或者是pc端的效果就不是很好。因为根节点的字体单位使用的是vw,当设备的宽度越来越大时,使用rem做单位的元素也会越来越大,以至于在ipad或者是pc上展示的效果会很差。

    解决方案:当屏幕过大的时候,我们可以使用媒体查询来限制根元素的字体大小,实现对页面的最大最小宽度限制。

    例如,在样式中加上这句代码,在pc上效果也很不错了。

    @media (min-width: 560px) {
      html {
        font-size: 54px;
      }
    }
    
    展开全文
  • react 配置 rempxrem适配手机端)

    千次阅读 2019-03-06 10:09:00
    1、 计算 js 在index.html中添加以下js <script> !(function(win, doc) { function setFontSize() { var baseFontSize = 100; var baseWidth = 320; ...

    1、 计算 js

    在index.html中添加以下js

    <script>
            !(function(win, doc) {
                function setFontSize() {
                    var baseFontSize = 100;
                    var baseWidth = 320;
                    var clientWidth = document.documentElement.clientWidth ||         window.innerWidth;
                    var innerWidth = Math.max(Math.min(clientWidth, 480), 320);
                    var rem = 100;
                    if (innerWidth > 362 && innerWidth <= 375) {
                        rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.9);
                    }
                    if (innerWidth > 375) {
                        rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.84);
                    }
                    window.__baseREM = rem;
                    document.querySelector('html').style.fontSize = rem + 'px';
                }
                var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
                var timer = null;
                win.addEventListener(evt, function() {
                    clearTimeout(timer);
                    timer = setTimeout(setFontSize, 300);
                }, false);
                win.addEventListener("pageshow", function(e) {
                    if (e.persisted) {
                        clearTimeout(timer);
                        timer = setTimeout(setFontSize, 300);
                    }
                }, false);
                setFontSize();
            }(window, document));
        </script>
    

    2、配置webpack.config.js

    由于react默认隐藏webpack配置需要手动显示。首先执行命令显示webpack配置

    npm run eject
    //Are you sure you want to eject? This action is permanent. (y/N) 
    y
    安装以下包:lib-flexible sass-loader node-sass postcss-px2rem-exclude 
    
    npm i lib-flexible sass-loader node-sass postcss-px2rem-exclude   --save
    

    修改webpack.config.js ,首先引入:

    const px2rem = require('postcss-px2rem-exclude');
    //加入
     px2rem({remUnit:75,exclude: /node_modules/i})
    

    然后找到处理postcss-loader的地方:
    image.png
    在我们的入口文件index.js 中引入lib-flexible

    import "lib-flexible"
    

    最后一步修改index.html

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

    配置完毕执行:

    npm  install 
    npm  start 
    
    展开全文
  • webpack配置postcss-px2viewport

    千次阅读 2018-02-08 10:05:05
    什么是postcss-px2viewport?http://npm.taobao.org/package/postcss-px2viewport一个postcss插件,结合viewport.js使用默认使用vw作为布局单位,对于不支持vw单位的,则使用rem进行布局对于标记了/*px*/的,则转换为...

    什么是postcss-px2viewport?

    一个postcss插件,结合viewport.js使用

    默认使用vw作为布局单位,对于不支持vw单位的,则使用rem进行布局

    对于标记了/*px*/的,则转换为[data-dpr="1"][data-dpr="2"][data-dpr="3"]三种不同的字体

    对于标记了/*no*/的,则不做处理,依然使用px进行布局

    配置过程

    首先确定安装了

    npm install postcss-loader --save-dev

    然后根目录下创建postcss.config.js

    填入以下内容:

    module.exports = {
        plugins: [
            require('autoprefixer'),
            require('postcss-px2viewport')
        ],
        module: {
            loaders: [
                {
                    test: /\.css$/,
                    loader: "style-loader!css-loader!postcss-loader"
                }
            ]
        },
        postcss: function() {
            return [px2viewport({viewportWidth: 736,viewportHeight:414})];
        }
    }


    展开全文
  • nuxt项目中使用postcss-px2rem踩坑记

    万次阅读 2018-03-16 14:13:17
    最近准备使用nuxt开发一个移动端的项目,在做技术调研时发现一款可以自动适配pxrem的神器,名为postcss-px2rem。于是,怀着激动的心情我开始了px2rem 的采坑记。 第一步下载: npm install postcss-px2rem –...
  • postcss-pxtorem如何忽略单个属性

    千次阅读 2018-11-19 10:35:47
    postcss-pxtorem如何忽略单个属性 好几天没写文章了,最近太忙了。。。。 今天分享一个关于postcss-pxtorem的hack  先上代码看一下 const pxtorem = require('postcss-pxtorem'); new webpack....
  • vue+px2rem实现pc端大屏自适应(rem适配)

    万次阅读 2019-09-04 11:39:02
    实现原理是:每次打包,webpack通过使用插件postcss-px2rem,帮我们自动将px单位转换成rem单位 前方有坑:UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内,打包适配时不会读取相关css,所以要...
  •   与原来的vue-cli 2.x版本不同的是:如果使用最新版本的@vue/cli初始化vue项目时,通常看不到webpack的配制文件,在原来的2.x版本,我们本可以轻松配制px2rem相关配置。为了解决这个问题,我研究了一下vue-cli的...
  • vue.js移动端配置flexible.js

    千次阅读 2017-12-21 17:52:49
    适用于最新版vue-cli,配置手淘的lib-flexible.js和rem实现移动端页面自适应1....在项目入口文件main.js中引入lib-flexibleimport 'lib-flexible'3.px转换rem使用 webpackpx2rem-loader,自动将px转换为rem 安装
  • 前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换...postcss-pxtorem:转换pxrem的插件。 自
  • rem响应式布局中,最著名的就是淘宝出品的flexible,马上到新公司,听经理说会有大屏幕展示,所以周末研究...vscode中,安装cssrem插件,在样式输入px为单位的数值时,提示信息中就有计算好的rem属性,非常方便。 但...
  • export const resetPc = () => { var wH = window.innerHeight; // 当前窗口的高度 var wW = window.innerWidth; // 当前窗口的宽度 ... // 表示1920的设计图,使用100PX的默认值 if (wW > 1400) { ...
  • 【VUE移动端适配】VUE使用flexible布局

    千次阅读 2018-08-07 10:32:29
    配置 flexible 安装 lib-flexible 在命令行中运行如下安装: npm i lib-flexible --save 引入 lib-flexible 在项目入口文件 main.js 里 引入 lib-flexible // main.js import 'lib-flexible' ...
  • 本笔记主要记录使用create-react-app一步步完善react移动端框架的过程,包括引入react-router、redux、redux、less、antd等。点项目源码查看具体细节。 1、项目初始化: ...npm install -g create-react-app // ...
  • 解决vue移动端适配问题

    千次阅读 2018-12-11 23:32:00
    基础点:rem相对根节点字体的大小。所以不用px; 根字体字体的大小px; px:你就当成cm(厘米)这样的东西吧; 基准:750设计稿; 这是方案的基础理论,在这个基础上,我们还要搞明白,到底要干一件什么事情! 目标一 ...
  • vue脚手架搭建移动端项目--flexible.js

    千次阅读 2020-04-28 17:36:43
    在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行 npm install vue-cli -g 安装完成后,通过 vue -V 查看版本号验证是否安装成功 通过vue-cli 初始化vue项目 输入命令行新建 vue-demo 项目 ...
  • vue引入其他框架组件方法汇总

    千次阅读 2020-01-03 10:30:02
    博前声明:这些方法都是基于nod.js的npm和webpack打包构建工具的前提下 一、引入jQuery框架: 首先在当前项目的根目录下(就是与package.json同目录),运行命令cnpm install jquery --save-dev 这样就将jquery...
  • 使用px单位设置页面的大小时,不进行适配处理,在不同的设备中显示结果是这样的,分辨率越大,显示的元素越小。 如下图1所示,使用的是px单位,未进行适配:iPhone5、iPhone6及iPhone6 Plus的显示效果: 控制台看到...
  • 移动端适配常用百分比,rem,后来又多了一个vh,vw。当然在less,sass可以写计算规则来转换px,比较麻烦,打包一次搞定就好 pxrem的配置 安装依赖 npm install px2rem-loader -D --save 配置loader var px2...
  • 了解真实的『REM』手机屏幕适配

    千次阅读 2018-01-15 15:23:46
    rem 作为一个低调的长度单位...rem 的官方定义『The font size of the root element.』,即以根节点的字体大小作为基准值进行长度计算。一般认为网页中的根节点是 html 元素,所以采用的方式也是通过设置 html 元素的 f
1 2 3 4 5 ... 20
收藏数 1,052
精华内容 420
热门标签
关键字:

webpack 其他rem 字体px