返回顶部
首页 > 资讯 > 精选 >vue自适应布局postcss-px2rem实例分析
  • 291
分享到

vue自适应布局postcss-px2rem实例分析

2023-06-30 13:06:17 291人浏览 泡泡鱼
摘要

这篇文章主要介绍“Vue自适应布局postCSS-px2rem实例分析”,在日常操作中,相信很多人在vue自适应布局postcss-px2rem实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue自适

这篇文章主要介绍“Vue自适应布局postCSS-px2rem实例分析”,在日常操作中,相信很多人在vue自适应布局postcss-px2rem实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue自适应布局postcss-px2rem实例分析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

首先,我们来了解一下lib-flexible和amfe-flexible:
lib-flexible是淘宝项目开发出来的一个开源插件,会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。而amfe-flexible是lib-flexible的升级版,所以现在我就只使用amfe-flexible了。
与其搭配的postcss-px2rem(pxtorem)作用为把px转变为rem
1.下载amfe-flexible: cnpm install postcss-px2rem -S
2.下载postcss-px2rem: cnpm install postcss-px2rem -S
小tip:使用yarn下载不了

未免兼容麻烦,我这里指定了版本

vue自适应布局postcss-px2rem实例分析

在main.js里引入amfe-felxible

import 'amfe-flexible'

在vue.config.js文件里面配置postcss

我下载的vue-cli3,配置如下

module.exports = {css: {    loaderOptions: {      css: {},      postcss: {        plugins: [          require('postcss-px2rem')({            remUnit: 37.5          })        ]      }    }  }}

vue-cli2配置则为

module.exports = {  "plugins": {    "postcss-import": {},    "postcss-url": {},    // to edit target browsers: use "browserslist" field in package.JSON    "autoprefixer": {},    "postcss-pxtorem": { // 此处为添加部分      rootValue: 100, // 换算基数,默认100,把根标签的font-size规定为1rem为50px,在设计稿上量出多少px直接在代码中写多少px      unitPrecision: 5,  //保留rem小数点多少位      propList: ['*', '!border', '!font-size'], //  存储将被转换的属性列表,'!font-size' 即不对字体进行rem转换      selectorBlackList: ['.radius'], // 要忽略并保留为px的选择器,例如fs-xl类名,里面有关px的样式将不被转换,支持正则写法。      replace: true,      mediaQuery: false,//(布尔值)媒体查询( @media screen 之类的)中不生效      minPixelValue: 12,///设置要替换的最小像素值,px小于12的不会被转换      //propWhiteList: [],  //默认值是一个空数组,这意味着禁用白名单并启用所有属性      propBlackList: ['font-size'], //黑名单    }  }}

到此,关于“vue自适应布局postcss-px2rem实例分析”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: vue自适应布局postcss-px2rem实例分析

本文链接: https://www.lsjlt.com/news/329413.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue自适应布局postcss-px2rem实例分析
    这篇文章主要介绍“vue自适应布局postcss-px2rem实例分析”,在日常操作中,相信很多人在vue自适应布局postcss-px2rem实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue自适...
    99+
    2023-06-30
  • vue自适应布局postcss-px2rem详解
    首先,我们来了解一下lib-flexible和amfe-flexible:lib-flexible是淘宝项目组开发出来的一个开源插件,会自动在html的head中添加一个meta n...
    99+
    2024-04-02
  • vue+px2rem实现pc端大屏自适应的实例代码(rem适配)
    配置前言 项目构建:基于vue-cli3构建,使用postcss-px2rem px2rem-loader进行rem适配 实现原理:每次打包,webpack通过使用插件postcss...
    99+
    2024-04-02
  • web开发中响应式布局和自适应布局的示例分析
    这篇文章给大家分享的是有关web开发中响应式布局和自适应布局的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   1. 设置 Meta 标签   大多数移动浏览器将H...
    99+
    2024-04-02
  • Vue前端项目自适应布局怎么实现
    这篇文章主要介绍“Vue前端项目自适应布局怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue前端项目自适应布局怎么实现”文章能帮助大家解决问题。一、单位尺寸px%vw、vh: 窗口em: ...
    99+
    2023-07-02
  • css3自适应布局如何实现
    这篇文章主要介绍“css3自适应布局如何实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css3自适应布局如何实现”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • Flex布局和Grid布局实例分析
    本文小编为大家详细介绍“Flex布局和Grid布局实例分析”,内容详细,步骤清晰,细节处理妥当,希望这篇“Flex布局和Grid布局实例分析”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新...
    99+
    2024-04-02
  • 关于vue自适应布局(各种浏览器,分辨率)的示例代码
    目录1.前言2.vue的布局风格2.1vue3需要配合element plus进行布局2.2src下面创建layout文件夹 3.测试效果 4.总结1.前言 sp...
    99+
    2024-04-02
  • vue中移动端自适应的示例分析
    这篇文章给大家分享的是有关vue中移动端自适应的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。方案1:直接引入js  (自己 写的动态改变fontsize的js...
    99+
    2024-04-02
  • css Flexbox布局实例分析
    今天小编给大家分享一下css Flexbox布局实例分析的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。概念Flexbox是f...
    99+
    2023-06-30
  • 使用rem适配布局的示例分析
    这篇文章给大家分享的是有关使用rem适配布局的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。当今手机种类繁多 且不说iphone系列,安卓手机的种类已经数不胜数了,所以不可能每一款手机都要写一套布局样式,...
    99+
    2023-06-09
  • 教你一招解决vue页面自适应布局
    目录安装依赖可配置项参数重启项目总结兼容vue2、vue3项目,将vue文件中style里单位为px,编译时自动转换为vw、vh等单位 安装依赖 npm install postcs...
    99+
    2024-04-02
  • 使用Rem怎么实现自适应布局
    本篇文章给大家分享的是有关使用Rem怎么实现自适应布局,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。在移动端我们一般会设置布局视口宽度=设备宽度,即内容呈现的区域在设备屏幕内。...
    99+
    2023-06-08
  • css怎么实现中间自适应布局
    本篇文章为大家展示了css怎么实现中间自适应布局,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。问题:如何实现三栏布局(高度固定,左中右的结构)假设高度已知,请写出三栏布局,其中左右宽度均为300px...
    99+
    2023-06-08
  • flex布局如何实现每行固定数量+自适应布局
    这篇文章主要介绍flex布局如何实现每行固定数量+自适应布局,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:效果展示解析 <div class="template"...
    99+
    2023-06-08
  • Vue前端项目自适应布局的简单方法
    目录一、单位尺寸二、基于rem实现自适应布局附:html5页面 的rem 布局适配方法总结一、单位尺寸 px%vw、vh: 窗口em: 针对父元素的font-sizerem:&ldq...
    99+
    2024-04-02
  • div内布局span实例分析
    本篇内容主要讲解“div内布局span实例分析”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“div内布局span实例分析”吧! 实例阐明:一个div配置定然宽...
    99+
    2024-04-02
  • CSS中flex布局实例分析
    这篇文章主要介绍“CSS中flex布局实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS中flex布局实例分析”文章能帮助大家解决问题。1. 浏览器 fl...
    99+
    2024-04-02
  • CSS图片布局实例分析
    这篇文章主要介绍了CSS图片布局实例分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇CSS图片布局实例分析文章都会有所收获,下面我们一起来看看吧。层叠样式表(英文全称:Cascading Style Shee...
    99+
    2023-06-27
  • 自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale的示例分析
    这篇文章主要介绍了自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale的示例分析,具有一定借鉴价值,感兴趣...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作