E-COM-NET
首页
在线工具
Layui镜像站
SUI文档
联系我们
推荐频道
Java
PHP
C++
C
C#
Python
Ruby
go语言
Scala
Servlet
Vue
MySQL
NoSQL
Redis
CSS
Oracle
SQL Server
DB2
HBase
Http
HTML5
Spring
Ajax
Jquery
JavaScript
Json
XML
NodeJs
mybatis
Hibernate
算法
设计模式
shell
数据结构
大数据
JS
消息中间件
正则表达式
Tomcat
SQL
Nginx
Shiro
Maven
Linux
postcss
vite3+vant移动端适配
vw配置安装插件npmi-Dautoprefixer@^10.4.7npmi-D
postcss
-px-to-viewport-8-plugin@^1.1.3创建配置文件根目录创建
postcss
.config.cjsmodule.exports
cooldrw2012
·
2023-08-16 07:46
Vue3+TS
vue.js
css
前端
vue+vant2—篇4—用viewport 单位适配浏览器
Vant默认使用px作为样式单位,如果需要使用viewport单位(vw,vh,vmin,vmax),推荐使用
postcss
-px-to-viewport进行转换。
有蝉
·
2023-08-16 07:46
vue+vant2
postcss
vue.js
css
移动端布局之
postcss
-px-to-viewport(兼容vant)
主角是谁在今天这篇文章中,我并不会在这里讲一些移动端视口的概念,包括物理像素和逻辑像素,理想视口,dpr等等等等,我只介绍这样一种非常不错的移动端适配方案:post-css-to-viewport痛点在哪里在之前有一种流行已久的移动端适配方案,那就是rem,我想下面这两句代码,有不少老移动端都不会陌生:constdeviceWidth=document.documentElement.client
康康不是只喵
·
2023-08-16 07:16
html/css
前端
vue2.0_移动端自适应布局之
postcss
-px-to-viewport(兼容vant-ui)
但是这样做非常繁琐,为了解决这个问题,我们直接使用当前比较流行的插件
postcss
-px-to-viewport去配置相应的属性来进行自适应布局的构建。
QiuRenBB
·
2023-08-16 07:45
Vue2.0
前端
vite项目
postcss
-px-to-viewport适配vant
关于vite项目
postcss
-px-to-viewport适配vant的问题,网上很多文章都已经过时或者都是基于webpack的配置,很少vite相关的配置教程,故做一下笔记希望帮到正在踩坑的同学。
YongChao_bms
·
2023-08-16 07:45
postcss
前端
适配vant
vue+px2rem实现pc端大屏自适应(rem适配)
配置前言项目构建:基于vue-cli3构建,使用
postcss
-px2rempx2rem-loader进行rem适配实现原理:每次打包,webpack通过使用插件
postcss
-px2rem,帮我们自动将
木易先生灬
·
2023-08-16 06:30
移动端/PC端适配实践
也不想计算转换系数(2)有些属性或者类选择器不想进行转换(3)css代码要足够简洁,只希望看到一种单位,那就是px目前看查询使用最多的适配方案有:使用amfe-flexible/lib-flexible和
postcss
-pxt
啥时候能干全栈
·
2023-08-15 21:10
vue
html
css
vue.js
css
javascript
html5
vue3+vite中使用
postcss
-px-to-viewport适配问题
适配方案
postcss
-px-to-viewport使用过程中出现以下问题:
postcss
-px-to-viewport不适配最新版本的
postcss
8⚠️报错:
postcss
-px-to-viewport
啥时候能干全栈
·
2023-08-15 21:08
postcss
前端
javascript
【Vue】Vue2创建移动端项目实战教程,创建移动端项目保姆级教程,接上一篇创建Vue2项目(中)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、创建vue2项目二、移动端适配1.安装插件flexible(适配移动端)2.安装
postcss
-pxtorem(把px转化为
阿民不加班
·
2023-08-15 10:20
创建项目实战开发
Vue
vue.js
javascript
前端
pc端网页屏幕自适应适配方案(rem)
1、安装flexible和
postcss
-px2remnpmilib-flexible--savenpmi
postcss
-px2rem--save-dev2、在main.js引入lib-flexibleimport'lib-flexible
siem
·
2023-08-15 05:56
vue3-vite使用lib-flexible(amfe-flexible)总结
记录一下安装插件安装
postcss
-pxtoremnpminstall
postcss
-pxtorem--save-dev安装lib-flexiblenpmi-samfe-flexible在main.js
禾苗种树
·
2023-08-13 10:48
vue
插件
javascript
前端
【Vue】屏幕适配(rem响应式布局)
目录一、所有页面适配,页面布局一致(不使用媒体查询)第一步:使用插件修改单位使用
postcss
-px2rem----修改单位(包括第三方组件)使用
postcss
-px2rem-exclude---修改单位
哇哦Q
·
2023-08-12 18:52
Vue
elementui
javascript
vscode
vite项目使用
postcss
-px-to-viewport做移动端适配
项目环境"dependencies":{"@element-plus/icons-vue":"^2.1.0","axios":"^1.4.0","clipboard":"^2.0.11","element-plus":"^2.3.5","file-saver":"^2.0.5","js-cookie":"^3.0.5","mavon-editor":"3.0.1","moment":"^2.29.
不会秃头
·
2023-08-11 06:40
postcss
前端
javascript
webpack-React脚手架配置
npmiwebpack-dev-serverwebpackwebpack-cli-Dnpmieslint-webpack-pluginhtml-webpack-pluginstyle-loadercss-loader
postcss
-loader
postcss
-preset-envl
长沙xtt
·
2023-08-11 00:21
vue.js
webpack
javascript
Vue+Vue Router+TailwindCss+Daisyui部署
npminstall>npmrundev二、设置IDEAJS版本三、安装TailwindcssInstallTailwindCSSwithVite-TailwindCSSnpminstall-Dtailwindcss
postcss
autoprefixernpxtailwindcssinit-p
v2hoping
·
2023-08-10 13:22
vue.js
前端
javascript
2019-07-31
PostCSS
的插件--关于vuerem适配布局方案
PostCSS
的插件作用:用于自动将像素单元生成rem单位记以下三种
postcss
-plugin-px2rem
postcss
-pxtorem
postcss
-px2rem
逍遥超
·
2023-08-09 10:02
vue-cli3 配置
postcss
-pxtorem
个人项目中踩坑:使用lib-flexible配合
postcss
-pxtorem无法正常使用;
postcss
-pxtorem版本6.0.0太高导致报错问题;适配方案:
postcss
-pxtorem搭配rem.js
vonson
·
2023-08-09 00:52
postcss
-px2rem-exclude打包rem影响其它项目的解决方案
在同一个VUE实例下的多个项目,比如一个是H5,另一个为Admin管理系统,那么在H5中使用了"
postcss
-px2rem-exclude",这样会影响到Admin页面里的样式变化,这个时候我们就需要把需要的文件在编译时打包成
蚂蚁上的大象
·
2023-08-08 21:37
JavaScript
H5
HTML
vue
vue.js
javascript
Error: No
PostCSS
Config found in... 报错
自己开发的npm包在项目中引用的时候,提示Error:No
PostCSS
Configfoundin...
drneilc
·
2023-08-06 14:30
vue项目开发之样式篇——
postcss
插件
vue项目开发之样式篇——
postcss
插件一、
postcss
插件简介及安装二、插件介绍1.
postcss
-advanced-variables2.
postcss
-partial-import3.
postcss
-px-to-viewport
MoYoon
·
2023-08-05 16:16
vue
css
postcss
vue.js
css
postcss
Vue-cli4.x中配置Autoprefixer
VueCLI内部使用了
PostCSS
所以只需要修改.
postcss
rc.js和.browserslistrc文件即可,没有的话新建文件.
postcss
rc.jsmodule.exports={plugins
My_Java_Life
·
2023-08-05 08:01
vue-cli3打包配置
vue.js
javascript
postcss
scss配置全局混入,神坑,mixin的文件名不能是mixin
sass-resources-loadernpminstallsass-resources-loader--save-dev2.全局引入变量文件(_variable.scss)和混入文件(_mymixin.scss),return{css:generateLoaders(),
postcss
vanessa_earth
·
2023-08-05 06:21
scss
scss
mixin
postcss
postcss
-pxtorem将px转为rem的实现
使用背景: 使用vite搭建vue的H5项目,将px单位转换为rem首先,安装命令:npminstall
postcss
postcss
-pxtorem--save-dev//或者npmi
postcss
postcss
-pxtorem-D
friend_ship
·
2023-08-05 06:20
TypeScript
JavaScript
postcss
javascript
前端
create-react-app 迁移到vite使用 pc和h5共存
背景create-react-app由于升级使用webpack5导致
postcss
配置不生效。
肥肥呀呀呀
·
2023-08-04 11:02
react.js
javascript
前端
报错:Cannot find module ‘autoprefixer‘
vue3-vite报错:Error:Loading
PostCSS
Pluginfailed:Cannotfindmodule'autoprefixer'第一步、解决:根目录上新建
postcss
.config.jsmodule.exports
皓月当空hy
·
2023-08-03 13:21
vue
前端
css
javascript
postcss
-px-to-viewport
之前做移动端适配时,基本上是采用rem方案,现在发现了一个新的方案,就是用viewport单位,现在viewport单位越来越受到众多浏览器的支持
postcss
-px-to-viewport,将px单位自动转换成
天天_好好学习
·
2023-08-03 05:28
【H5移动端】前端H5移动端的单位适配方案集,包括给你用例子讲明白什么是1像素的问题(不定期补充~)
文章目录前置概念视口概念关于像素必要工作:设置理想视口(必须的)方案集@media修改动态rem(不推荐)第三方手淘flexible(不推荐)JS控制rem(不推荐)
postcss
-px-to-viewport
庞囧
·
2023-08-02 00:28
H5移动端
前端
css
css3
【webpack】4-如何解析CSS、LESS等预处理器以及一些优化处理,提取单独文文件、兼容处理
postcss
,压缩
文章目录css解析安装配置预处理器提取css成单独文件安装配置兼容处理安装配置压缩安装配置css解析乞丐版webpack想认识css需要css-loader。主要用于加载css文件,例如在main.js中引入css文件,没有css-loader的webpack是不认识的。原理是转换成commonjs对象,本质是js,里面内容是样式字符串。同时还需要style-loader,因为打包后的css一般都
庞囧
·
2023-08-02 00:28
webpack
css
node.js
vue.js
Panda 编译时原子化 CSS-in-JS 框架的跨平台方案
框架的跨平台方案对编译时原子化CSS框架的思考编译时CSS-in-JS方案对比LinariaPandacss总结weapp-pandacss介绍快速开始pandacss安装和配置0.安装和初始化pandacss1.配置
postcss
2
ice breaker
·
2023-08-01 03:50
css
css
javascript
前端
Vue 4.2.3 cli脚手架创建的项目没有
postcss
rc.js,配置
postcss
vw适配?
1.在项目的根目录下新建一个
postcss
.config.js配置文件添加文件2.并且在配置文件里写入
postcss
.config.jsmodule.exports={plugins:{'
postcss
-import
静_c540
·
2023-07-31 07:37
Vue:项目文件代码解释、stylus语法、vuex、vue-router编程式导航、keep-alive让路由不重复加载
postcss
rc:是对postc
我的皎月闻越香_
·
2023-07-31 02:02
webpack基础配置
webpack配置5概念+devServer生产环境webpack配置实例开发环境webpack配置实例webpack优化webpack处理css兼容问题下载loader引入package.json修改
postcss
-loader
iiiiiiiice
·
2023-07-30 15:31
webpack
前端
node.js
vite3+H5+vant3+pina项目搭建
image.png1、创建vite模板npminitvite@latestmy-vue-app----templatevue2、引入vw适配方案npmi-Dautoprefixer@^10.4.7npmi-D
postcss
-px-to-viewport
kalrase
·
2023-07-30 11:56
简单速记-px2vw
px2vw--------css单位转换为了移动端适配,我们可以使用
postcss
-px-to-viewport插件来进行px-vw的单位转换文档指路------>GitHub安装
postcss
-px-to-viewportnpminstall
postcss
-px-to-viewport
长鲸向南
·
2023-07-30 00:09
vue2.x 的移动端适配
vue2.0的移动端适配1.安装
postcss
-loadernpmi
postcss
[email protected]
.安装
postcss
-pxtoremnpmi
postcss
[email protected]
.创建
无上星空
·
2023-07-29 20:24
vue
移动端适配rem
1.安装amfe-flexible和
postcss
-pxtorem,npminstallamfe-flexible--savenpminstall
postcss
[email protected]
(这里我使用的
周亚鑫
·
2023-07-29 20:51
vue
h5
vue
vw移动端适配 与 vant 集成 导致 vant组件缩小如何解决?
修改.
postcss
src.js中关于
postcss
-px-to-viewport的selectorBlackList忽略转换的配置可解决问题,配置如下module.exports={"plugins"
趣有书
·
2023-07-28 20:10
vue-element-admin中实现自适应功能
有这样一个需求:在1920*1080下视图显示正常,但是需要在1600*900下也要显示正常(在vue-element-admin下)我们直接使用
postcss
-px-to-viewport这个插件。
steamedbread321
·
2023-07-28 12:23
vue
vue-element-admin中实现自适应功能
npminstall
postcss
-px-to-viewport--save-dev项目根目录下建一个名字为.
postcss
rc.js的js文件(前边的.别忘了),在该文件里写以下代码//添加如下配置:
小坚果_
·
2023-07-28 12:51
vue.js
javascript
elementui
CSS Sprite精灵图如何缩放大小
在移动端项目当中,如果要使用精灵图的话,因为我做了px自动转换vw单位,所以在使用的时候,position位置正常写单位是px,但是转化成vw后就找不到对应的图片了"
postcss
-px-to-viewport
xuanwulb
·
2023-07-28 08:41
vue中px转化为rem
手机项目中px自动转化为rem会大大的方便开发,一开始我使用的插件是px2rem-loader然后经过配置启动后,报错,说是没有找到mint-ui的样式,我的项目有使用mint-ui这个ui库然后我使用
postcss
-plugin-px2rem
随遇而安_fbca
·
2023-07-28 03:45
vue 中安装插件实现 rem 适配以及 js 常用适配代码
postcss
-pxtorem是
PostCSS
的插件,用于将像素单元生成rem单位。autoprefixer浏览器前缀处理插件。
来杯卡布奇洛
·
2023-07-28 02:05
Vue
vue.js
javascript
前端
vite+vue3 css scss PC移动布局自适应
1.安装
postcss
-pxtorem和autoprefixernpminstall
postcss
-pxtoremautoprefixer--save2.vite.config.js引入并配置import
postCss
PxToRemfrom'
postcss
-pxtorem'importautoprefixerfrom'autoprefixer'exportdefaultdefineConfig
有趣的前端
·
2023-07-27 18:16
vue.js
vite
css
scss
前端
vue3+vite 使用
postcss
-pxtorem、autoprefixer 实现自适应和自动添加前缀
自动添加前缀:自适应:1、安装
postcss
-pxtorem和autoprefixernpminstall
postcss
-pxtorem --savenpmiautoprefixer2、vite.config.js
想不到耶
·
2023-07-27 07:20
vue3
vue.js
vue项目
postcss
-px-to-viewport自动适配各种分辨率,px单位自动转vw单位,脚手架cli2.0、cli3.0、cli4.0配置方法汇总
背景介绍:有个项目需要适配pc端的多种分辨率,我想到了px单位自动转vw的插件,但是我的项目脚手架用的是cli3.0的版本,我引入
postcss
-px-to-viewport后一直无法生效,找了很多地才找到
银鞍照白马
·
2023-07-27 06:04
《前端工程化》
vue.js
前端框架
webpack初始化vue项目(四)——其它插件安装
在上一章,我们已经可以正常的编译运行项目了我们还需要一些插件来加快我们的开发速度1.
postcss
-loader和autoprefixer这两个loader用于补齐css的兼容前缀类似-webkit-moz-o
明月半倚深秋_f45e
·
2023-07-26 23:14
PostCSS
plugin
postcss
-pxtorem requires
PostCSS
8.
在项目中做移动适配的时候运行如下命令1.下载
postcss
-pxtorem和lib-flexible包npminstall
postcss
-pxtorem--save-dev或npmi
postcss
-pxtorem-D
王——小喵
·
2023-07-26 20:58
报错问题
前端
移动适配
基于vue-cli3的vue项目 通过
postcss
-pxtorem 实现px自动转换成rem
使用
postcss
-pxtorem项目中的px转换为rem,rem单位用于适配不同宽度的屏幕。
唯吾听烟雨
·
2023-07-26 09:24
postcss
-pxtorem
Rem布局适配如果需要使用rem单位进行适配,推荐使用以下两个工具:
postcss
-pxtorem是一款
PostCSS
插件,用于将px单位转化为rem单位lib-flexible用于设置rem基准值
PostCSS
书中自有妍如玉
·
2023-07-26 00:05
前端
postcss
前端
javascript
css终极方案
PostCSS
一见如故原理所有的css框架都在一样的事,那就是由一个css生成一个新的css,那么
postcss
就来做了一个抽离:1、将原有的css解析成抽象语法树2、中间经过若干个插件3、重新文本化,形成新的css
postcss
.config.jsmodule.exports
monstkl
·
2023-07-25 14:23
css
css
postcss
前端
上一页
4
5
6
7
8
9
10
11
下一页
按字母分类:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
其他