基于Vue3+vite使用postcss-pxtorem、autoprefixer，及less的创建

最新推荐文章于 2024-04-25 11:25:17 发布

菜主Erica

最新推荐文章于 2024-04-25 11:25:17 发布

阅读量832

点赞数

文章标签： postcss less 前端

本文链接：https://blog.csdn.net/ericawrr0123/article/details/132318594

版权

安装环境：vue3 + vite

rem设置：

autoprefixer是自动补全css3前缀的库
postcss-pxtorem是将px换算为rem的库

npm install --global yarn
yarn add postcss-loader postcss-pxtorem -D
yarn add autoprefixer@9.8.6 -D

在根目录下配置 postcss.config.js 文件

module.exports = {
   
    "plugins": {
   
        // 针对插件的兼容配置
        "autoprefixer": {
   //css兼容前缀
            overrideBrowserslist: [
                'Android 4.1',

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

菜主Erica

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
基于Vue3+vite使用postcss-pxtorem、autoprefixer，及less的创建

基于Vue3+vite使用postcss-pxtorem、autoprefixer，及less的创建
复制链接

扫一扫

vite-postcss-pxtorem使用（移动端px-scss适配）

koliase的博客

10-28

1854

系列文章目录提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录目录系列文章目录文章目录前言一、postcss-pxtorem引入二、使用步骤 1.配置 2.pc端适配移动端宽度 2.可按实际的px基础修改（本文为iphone6切稿）总结前言 vue3的入门了解，个人学习，不足或错误请大佬们指出，一定会认真改正！提示：以下是本篇文章正文内容，下面案例可供参考一、postcss-pxtorem引入 $ npm insta

Vite中使用flexable和postcss-pxtorem进行移动端适配

weixin_43554584的博客

11-15

6121

学会用这两个移动端适配将会变得非常简单。

1 条评论您还未登录，请先登录后发表或查看评论

vue3.0中使用postcss-pxtorem的具体方法

12-13

postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem的使用。 1.安装依赖 npm install postcss-pxtorem -D 2.设置规则（更改postcss.config.js,该文件为使用vue-cli3自动创建的文件） module.exports = { plugins: { 'autoprefixer': {

关于vue利用postcss-pxtorem进行移动端适配的问题

01-19

刚开始我按照网上的一些方式利用postcss-pxtorem方式去适配的时候怎么样都不成功，后来经过自己不断尝试之后终于成功了。稍微坐下总结： 1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置，而不要用webpack-simple，因为webpack里面很多插件加载器之类的都是给你预配好的，这样在项目构建中就不会遗漏什么。 2.cnpm install postcss-pxtorem -D安装postcss-pxtorem，此插件如果你用的是webpack的话只要进行安装即可，不需要另外进行配置，此插件是对px进行转换。 3.新建一个rem.js的

[vite] 带看文档配置postcss-pxtorem

热门推荐

CSDN for recording problems

02-23

1万+

下载 postcss-pxtorem npm i postcss-pxtorem -D 与package.json同级目录创建postcss.config.js文件 module.exports = { plugins: { autoprefixer: { overrideBrowserslist: [ "Android 4.1", "iOS 7.1", .

Vue3+Vite 利用postcss-pxtorem移动端适配

Armof的博客

06-08

2481

【代码】Vue3+Vite 利用postcss-pxtorem移动端适配。

vue-cli3 + vant + postcss-px2rem实现移动端页面.docx

09-06

vue-cli3 + vant + postcss-px2rem实现移动端页面

vue3-vite下配置postcss-pxtorem进行移动端适配

xunyun12的博客

10-10

346

原文章链接 http://www.manongjc.com/detail/41-ptzlvdwchorarkz.html。vue3-vite下配置postcss-pxtorem进行移动端适配@

vue3+vite安装postcss-pxtorem

qq_43600406的博客

01-13

2164

vue3+vite安装postcss-pxtorem

vue3+vite+ts项目搭建-postcss-pxtorem

weixin_46054431的博客

02-12

3533

vue3+vite+ts项目搭建-postcss-pxtorem

vite + vue3使用postcss-pxtorem适配移动端

m0_60284090的博客

06-20

808

vite + vue3使用postcss-pxtorem适配移动端

vue3.0+vite 使用 postcss-pxtorem 自适应（px转rem）

weixin_49295874的博客

12-17

6356

安装插件 npm i postcss-pxtorem -D npm i amfe-flexible -D npm i autoprefixer main.js引入 import 'amfe-flexible/index.js'; 与package.json同级目录（根目录）创建postcss.config.js文件 module.exports = { plugins: { autoprefixer: { overrideBrowserslist: [

vue3 适配 postcss-pxtorem

m0_59994452的博客

11-27

999

基于项目需要兼容笔记本的2k屏，和1080p的屏所以需要使用到 postcss-pxtorem插件将px 转成rem以达到兼容多个分辨率的需求。2、在main.ts中引入amfe-flexible。3、在vite.config.ts加入如下代码。5、好像内联样式不管用，1、先安装这两个插件。

vue3移动端使用pxtorem

weixin_44755522的博客

11-10

459

vue3，移动端rem自适应

vue3+vite使用postcss-px-to-viewport行内样式不转换如何解决

05-31

使用`postcss-px-to-viewport`插件转换行内样式需要在`vite.config.js`配置文件中添加`css`相关选项。具体的配置方法如下： ```javascript // vite.config.js import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], css: { postcss: { plugins: [ require('postcss-px-to-viewport')({ unitToConvert: 'px', viewportWidth: 375, viewportHeight: 667, unitPrecision: 5, viewportUnit: 'vw', selectorBlackList: ['.ignore', '.hairlines'], minPixelValue: 1, mediaQuery: false, replace: true, exclude: [/node_modules/], landscape: false, landscapeUnit: 'vw', landscapeWidth: 568 }) ] } } }); ``` 在`css`选项中配置`postcss`插件，并且设置`replace`选项为`true`，即可将行内样式也转换为`vw`单位。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交