PostCSS

小满Vue3第三十六章（Vue如何开发移动端）

为此我研究了一套解决方案在之前我们用的是rem根据HTMLfont-size去做缩放现在有了更好用的vwvhvw视口的最大宽度，1vw等于视口宽度的百分之一vh视口的最大高度，1vh等于视口高度的百分之一1.安装依赖npminstallpostcss-px-to-viewport-D
小满zs·2022-06-30 13:23

VUE 移动端适配——px2rem 和 postcss-pxtorem

postcss-pxtorem是一款postcss插件，用于将css单位转化为rem。
足各路·2022-06-30 09:22

“postcss-px-to-viewport”——移动端前端适配的又一种方案

0、前言博主以前在做移动端的时候主要使用@mediascreenand(min-width:1200px){}或者灵活点，会用之前一种流行已久的移动端适配方案，那就是rem，也就是会用如下代码：constdeviceWidth=document.documentElement.clientWidth||document.body.clientWidth;document.querySelector
LIMI_伞梦·2022-06-30 09:41

前端学习路线(很长,建议收藏)

前后端分离思想3、IDE（vscode）编译器二、前端基础**HTML（结构）**CSS（样式）**JAVASCRIPT（交互）三、前端基础补充知识CSS预编译（sass、less、Stylus）CSS后处理器（PostCss
battle_King·2022-06-28 14:43

Vue使用Vant适配移动端

import'amfe-flexible'2.REM适配原理利用媒体查询或JS动态检测设配的宽度，不同宽度下设置对应的根元素字体大小，这样所有使用REM作单位的元素就跟着变化.2.1如何把写的px转换成remnpminstallpostcss-pxtorem
数组喜欢打对象·2022-06-22 14:53

在 Vue 3 和 Vite 安装 Tailwind CSS

TailwindCSS-TailwindCSS中文文档安装Tailwind以及其它依赖项:目前最新的tailwindcss3.0.24，我们这里用2.2.19,因为有些配置改了[email protected]postcss
跪下，大胆刁民·2022-06-22 14:59

Vue3 Vite 使用 tailwindcss & element-plus & iconify

www.tailwindcss.cn/docs/guides/vue-3-vite新建Vuevite项目，然后安装tailwindcss#vue-3-vite中安装npminstall-Dtailwindcss@latestpostcss
而又何羡乎·2022-06-22 14:58

vue3.x兼容tailwindcss(截至发帖)

1.postcss.config.jsconstpurgecss=require('@fullhuman/postcss-purgecss')({content:['.
qq_40676272·2022-06-22 14:55

学习Vue3 第三十四章（Vue3集成Tailwind CSS）

TailwindCSS是一个由js编写的CSS框架他是基于postCss去解析的官网地址TailwindCSS中文文档-无需离开您的HTML，即可快速建立现代网站。
小满zs·2022-06-22 13:31

postcss及基本使用

PostCss是一个用JavaScript工具和插件转换CSS代码的工具利用从CanIUse网站获取的数据为CSS规则添加特定厂商的前缀。
·2022-06-22 00:54

mall1

production'VUE_APP_BASE_API='http://itfly.vip:8888'vue.config.jsmodule.exports={css:{loaderOptions:{css:{},postcss
sskingfly·2022-06-12 00:28

vue pc端自适应各个屏幕

使用的方案lib-flexible-computer+px2remLoader+postcss-px2remlib-flexible：阿里可伸缩布局方案px2rem-loader：px转rempostcss-px2rem
阿六啊·2022-06-11 20:33

vue@cli4 和 webpack5【实现自适应px-rem转化】

vue@cli4构建的，使用webpack5来打包的，3：想要实现本地编译时和上线后，适配所有pc端步骤1：安装2个插件：autoprefixer:它可以解析CSS文件并且添加浏览器前缀到CSS内容里和postcss-pxtorem
JIseven·2022-06-01 09:27

Vite的使用

Vite的使用浏览器支持esMoudle的弊端Vite的安装和基本使用Vite对CSS、Less、postcss的支持Vite对ts的支持Vite服务器原理Vite对Vue的支持和预打包处理Vite的打包和预览过程
南星DT·2022-05-29 21:23

Vue 使用lib-flexible适配PC端（rem）

安装lib-flexible与postcss-px2remnpminstalllib-flexible或yarnaddlib-flexible代码直接使用rem单位不方便阅读，安装postcss-px2rem
Rising_life·2022-05-23 10:00

vue自适应布局postcss-px2rem详解

首先，我们来了解一下lib-flexible和amfe-flexible:lib-flexible是淘宝项目组开发出来的一个开源插件，会自动在html的head中添加一个metaname="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。而amfe-flexible是lib-flexible的升级版，所以
·2022-05-15 12:27

vue中使用postcss-px2rem的两种方法

目录如何使用：1.安装2.设置vue项目中使用postcss-px2rem的2种方法在项目中为了屏幕适配，经常会用到rem，postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem
·2022-05-15 12:26

react px自动转rem,屏幕自适应

React项目前提使用的@craco/craco做webpack配置安装yarnaddpostcss-pxtorem@[email protected]在craco.config.js配置文件里加如下代码
前端人·2022-05-12 16:43

深入PostCSS Web设计

本文节选自《深入PostCSSWeb设计》一书，由电子工业出版社出版。无论是美化HTML元素，还是创建复杂的页面动画，都离不开CSS，CSS是一个网站不可或缺的组成部分。
陈秋歌·2022-05-12 11:36

来会会babel这个重要且神奇的工具

命令行使用babel和之前说到的postcss一样，可以通过命令行运行，
·2022-05-08 22:30

postcss-px-to-viewport在Vite中如何配置

项目描述：vite+vue3+ts移动端问题描述：安装完postcss-px-to-viewport插件后，按照之前vue-cli项目的方式，src目录下新建postcss.config.js文件并进行规则配置
·2022-05-07 18:56

webpack的loader/plugin区别

例如：css-loader、style-loader、postcss-loader、sass-loaderplugins:从打包优化和压缩，一直到重新定义环境中的变量.例如：uglify-webpack-plug
·2022-05-06 11:28

31、样式穿透（scoped)：如何改变加了scoped的组件的样式

它是通过PostCSS转换以下内容来实现的：子组件的根元素在带有scoped的时候，父组件的样式将不会泄露到子组件当
一只小小小菜鸟·2022-05-04 19:42

解决多行文本换行省略显示失效的问题

配合postcss一起使用会更好。但同时它也会带来一些问题，例如它不会帮你添加-webkit-之类的prefixer。虽然它会帮你增加新前缀，但也会帮你删除老式过时的代码。
越前君·2022-04-20 17:24

vue和react脚手架rem适配配置

一、vue脚手架rem适配配置初始化脚手架vuecreatemy-app安装依赖npmipostcss-px2rem-D根目录下建立vue.config.js文件，内容如下varpx2rem=require
張三同学·2022-04-06 16:55

前端面试题整理——webpack相关考点

4、处理样式使用postcss-loader、css-loader、st
火星_PGY·2022-04-01 22:00

前端面试题整理——webpack相关考点

4、处理样式使用postcss-loader、css-loader、st
火星_PGY·2022-04-01 22:00

移动端的兼容问题及vuecli4里使用rem

vuecli4里使用rem首先安装安装两个插件屏幕自适应插件npmiamfe-flexible--save把px转成rem的插件,只能在css文件里面写里面的npmipostcss-px2rem--savepackage.json
af5e2949dafd·2022-03-30 14:11

vue-cli3.0 使用postcss-plugin-px2rem（推荐）和 postcss-pxtorem（postcss-px2rem）自动转换px为rem 的配置方法；

如何在vue-cli3.0中使用postcss-plugin-px2rem插件插件的作用是自动将vue项目中的px转换为rem。为什么这三个中要推荐postcss-plugin-px2rem呢？
C+ 安口木·2022-03-24 00:37

移动端适配通过插件postcss-pxtorem实现

下载插件：npminstallpostcss-pxtorem--save-dev下载完后进行配置如下：//在项目根目录下创建postcss.config.js文件module.exports={plugins
master-sun-·2022-03-24 00:04

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

最常用的方法是使用amfe-flexable和postcss-pxtorem这两个插件来帮助进行适配。amfe-flexableamfe-flexable是阿里发布的一套可伸缩适配方案。
马可仕马可仕·2022-03-24 00:33

postcss-pxtorem 插件自动转换 rem 单位的配置

写这篇博客的原因在于，网上很多postcss-pxtorem插件的配置都无法生效（原因在于创建项目的工具如vue-cli版本等的不同），生生地浪费了很多时间。
笑道三千·2022-03-24 00:02

vue自适应pxtorem_vue-cli4中配置移动端自适应postcss-pxtorem

vue-cli创建完项目之后安装amfe-flexible和postcss-pxtoremnpmiamfe-flexible-Snpmipostcss-pxtorem-Damfe-flexible来根据屏幕动态改变根元素
weixin_39618275·2022-03-24 00:31

Vue px自动换算 插件 postcss-pxtorem lib-flexible

save12.引入lib-flexible在main.js中引入lib-flexibleimport'lib-flexible';13.设置meta标签通过meta标签，设置设备宽度以及缩放比例14.安装postcss-pxtorem
这个杀手好冷·2022-03-24 00:58

nuxt3-postcss-pxtorem rem适配踩坑

nuxt3使用postcss-pxtorem安装相关包npmiautoprefixerpostcsspostcss-pxtorem//npm"autoprefixer":"^10.4.2","postcss
金皮卡tql·2022-03-24 00:27

postcss-pxtorem单位转换插件配置报错Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8. Mig

原因是依赖版本太高,所以执行以下命令进行版本降级,重新启动项目即可npmipostcss[email protected]在根目录新建postcss.config.js文件中配置module.exports=
湾流~·2022-03-24 00:57

vue-cli3.0 使用postcss-plugin-px2rem（推荐）和 postcss-pxtorem（postcss-px2rem）自动转换px为rem 的配置方法

如何在vue-cli3.0中使用postcss-plugin-px2rem插件插件的作用是自动将vue项目中的px转换为rem。为什么这三个中要推荐postcss-plugin-px2rem呢？
Argent_·2022-03-24 00:56

postcss-pxtorem 插件的配置

SyntaxError:Error:PostCSSpluginpostcss-pxtoremrequiresPostCSS8.移动端正常安装postcss-pxtorem安装完配置.postcssrc.js
何时才能不菜·2022-03-24 00:18

rem适配

目标复习适配方案脚手架项目集成postcss翻译css代码适配方案选型PC端一般都是1:1用px还原UI设计图,靠内容撑开高度移动端一般都是rem单位进行适配适配步骤下载amfe-flexible根据网页宽度
weixin_54080176·2022-03-23 19:02

vue2+vant2 使用rem进行浏览器适配

如果需要使用rem单位进行适配，推荐使用以下两个工具：postcss-pxtorem是一款PostCSS插件，用于将px单位转化为rem单位lib-flexible用于设置rem基准值但是昨天在安装使用的时候
·2022-03-10 09:17

Webpack——必知必会

文章目录npm要装的都在这里使用配置文件处理CSScssless处理CSS兼容性browserslistpostcss@import资源文件图片背景图片自定义图片名称url-loaderasset图标字体插件自动清理输出文件夹自动生成根
_雪菜肉丝面_·2022-03-05 08:09

浅谈vue 移动端完美适配方案

前言：根据最近做的一个医疗手机端项目总结在移动端，vue怎么在不同屏幕上做根据不同屏幕大小适配1、适配方案在本项目中我所使用的vue移动方案是使用amfe-flexible和postcss-pxtorem
·2022-03-01 18:31

vue-cli browserslist 浏览器兼容

Autoprefixer:PostCSS插件解析CSS并使用CanIUse中的值将供应商前缀添加到
带刀打天下·2022-02-21 02:43

vue使用rem适配

4.废话不多说,直接上操作://安装postcss-pxtoremnpmipostcss-pxtorem-S5.在src目录新建rem文件夹,下面新建rem.js,添加如下代码://基准大小constbaseSize
·2022-02-19 18:34

vue使用lib-flexible和postcss-pxtorem(px转rem)进行适配

1.开发环境vue2.电脑系统windows10专业版3.在开发的过程中,我们需要做适配,下面我来分享一下方法,希望对你有所帮助。4.废话不多说,直接上操作://安装lib-flexiblenpminstalllib-flexible--save-dev5.修改lib-flexible配置//文件在node_modules>lib-flexible>flexible5-1.在mian.ts中引入l
·2022-02-19 18:34

小程序之wepy（安装以及代码高亮）

npminstallwepy-cli-gwepynewmyProtectcdmyProtectnpminstallnpmbuild--watch设置project.config.json"urlCheck":true,"es6":false,"postcss
淡淡紫色·2022-02-19 18:01

webpack4之使用postcss-loader和autoprefixer浏览器兼容

save-devcss-loaderstyle-loader2.要处理css和添加浏览器前缀需要下载如下插件和loader//sass-loader依赖于node-sass，所以还要安装node-sass//postcss-loaderautoprefixerpostcss
world_7735·2022-02-18 21:20

antd-mobile定制主题，报错：ValidationError: Invalid options object. Less Loader has been initialized usin...

/node_modules/postcss-loader/src??postcss!./node_modules/r
喵喵同学嘛·2022-02-18 18:54

React多页面应用6(webpack4 开发环境打包性能初提升)

1、React多页面应用1(webpack4开发环境搭建,包括热更新,api转发等)---2018.04.042、React多页面应用2(webpack4处理CSS及图片,引入postCSS,及图片处理等
前端人人·2022-02-18 14:50

使用 webpack postcss-loader

Installnpmi-Dpostcss-loaderwebpack.config.js(recommended)module.exports={module:{rules:[{test:/\.css$
游于北方丶知寒·2022-02-17 17:26
上一页 12 13 14 15 16 17 18 19 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他