Comments (5)
可以了哦 谢谢作者大大,我这边再需要调一下pc端媒体查询
from postcss-mobile-forever.
要转换成 vh 要把 viewportUnit 设置成 vh,下面是我帮你改的配置,去掉了 postcss-px-to-viewport,因为功能和 postcss-mobile-to-multi-displays 重复了,postcss-mobile-to-multi-displays 的版本要指定成最低 1.3.2 的版本:
module.exports = {
plugins: {
autoprefixer: {}, //给不同的浏览器添加前缀
"postcss-mobile-to-multi-displays": {
"viewportWidth": 375,
"rootClass": "root-class",
"enableMobile": true,
"unitPrecision": 3,
"mobileConfig": {
"viewportUnit": "vh", // <--- 移动端竖屏能转换 vh
"fontViewportUnit": "vw",
"selectorBlackList": ['TabBarItem', '.pc-container', 'van'], // 指定不需要转换的类
"replace": true
}
},
}
}
如果还需要 postcss-px-to-viewport 的话,像下面这样配置试试,这样的话 postcss-px-to-viewport 是用来做视口单位转换,postcss-mobile-to-multi-displays 是用来添加桌面端和横屏的媒体查询:
module.exports = {
plugins: {
autoprefixer: {}, //给不同的浏览器添加前缀
"postcss-mobile-to-multi-displays": {
"viewportWidth": 375,
"rootClass": "root-class",
"unitPrecision": 3,
},
"postcss-px-to-viewport": {
unitToConvert: 'px', // 需要转换的单位
viewportWidth: '375', // 视窗的宽度,对应设计稿的宽度 理想视口宽度为375
viewportHeight: '667', // 视窗的高度,对应设计搞的高度
viewportUnit: 'vh',// <---- 移动端竖屏能转换 vh
selectorBlackList: ['TabBarItem', '.pc-container', 'van'], // 指定不需要转换的类
minPixelValue: 1, // 小于或者等于1px 不转换
mediaQuery: false, // 是否允许媒体查询中转换px
unitPrecision: 5, // 转换后的精度,即小数点
// mediaQuery:true
}
}
}
默认状态下很多用不到的属性都不要写,不然这么多看起来太吓人了==
from postcss-mobile-forever.
更新了版本样式好像都乱了 之前我是用的postcss-mobile-to-multi-displays1.1.0的版本,我用postcss-px-to-viewport做了手机的适配,做完才和我说要在pc端 以手机的尺寸375展示出来
from postcss-mobile-forever.
电脑上的 375px 相当窄,可以试下默认的 600px,就是 desktopWidth
,也就是限制了 vw 的最大宽度是 600px。
第二个配置有效吗,第二个配置是用 postcss-px-to-viewport 做视口宽度单位转换的。如果有 position: fixed
的布局,元素可能会定位到视图区域外,方便的话可以发张图片。
我看到你有这三个类是忽略视口转换的,['TabBarItem', '.pc-container', 'van']
,这个在 postcss-mobile-to-multi-displays 生成的媒体查询里不会生效,也可能导致错乱。
from postcss-mobile-forever.
刚刚我升级了版本,2.0.0 的版本里也可以对媒体查询做 propList 和 selectorBlackList 处理了,对指定的选择器和属性也会在媒体查询中忽略。
还有就是这个版本的移动端视图默认会进行视口单位转换,用 disableMobile: true
就可以关闭,不是原来的 enableMobile 了。
postcss 也更新了依赖,依赖最低 postcss8.0.0 的版本。
from postcss-mobile-forever.
Related Issues (20)
- 如果我希望在980宽度以下,不再进行缩放,怎么配置呢? HOT 5
- 设置了maxDisplayWidth 之后,对于 width 设置为 100% 的元素,也会被重置为 min(100%, 500px),但是我希望忽略设置为 100% 的元素 HOT 14
- 有个nuxt3官网项目,准备同时适配PC和移动端,有插件相关demo参考下吗 HOT 2
- 配置include和exclude不生效 HOT 11
- bug: css 变量默认值不转换 HOT 1
- 可以增加一个最小宽度的限制么,目前我的需求是pc端适配,移动端不适配 HOT 1
- About Nuxt DevTools Width Display HOT 4
- 设置了之后移动端和pc端是不是都会限制最大宽度 HOT 13
- postcss-mobile-forever版本4.1.2在 Vue3 vite5 配置不生效 HOT 4
- 媒体查询中的 vw 转换 HOT 10
- Vant4项目使用之后popup的mask半透明黑色背景不会宽度100%了 HOT 2
- 在webcompent组件中不生效,已禁用shadow HOT 6
- 设置 include unocss 无法转换 HOT 9
- uni-app使用 HOT 3
- 如何让maxDisplayWidth只针对某个class或者某个页面,而不是一设置上来就是限制全局 HOT 13
- `border` 属性的实现,用 `box-shadow` 去模拟是否会更合适 HOT 2
- 设置桌面端最大宽度 HOT 2
- 能否支持在转换成vw时,让某些竖直方向的属性,比如height,使用vh HOT 5
- 当我设置了background-attachment: fixd, 背景图片显示效果不对,应该如何调整 HOT 1
- 关于开启border后,min-height: 100vh 属性在ios下的问题 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from postcss-mobile-forever.