Comments (13)
您理解的没问题,这个库的目标是让移动端界面兼容在 pc 端展示。我想看下你的 postcss 配置文件截图和 postcss-mobile-forever 的版本号,最好也有目前 pc 端展示的截图,另外在你上面的配置片段里 viewportWidth
这个属性设置可以直接设置成 "viewportWidth": 375
。
from postcss-mobile-forever.
前提:使用的是vant控件。
问题:
- 目前在移动端也出现相同问题,是否和vant控件有关
- 想再次确认一下,maxDisplayWidth只作用于pc端 还是 双端(移动和pc),单位是像素吗,vm转换后如果超过
maxDisplayWidth指定的值,是不转换还是转换成maxDisplayWidth指定的值
from postcss-mobile-forever.
和 vant 无关,maxDisplayWidth
是作用于任何端的,只是应该是你理解的效果和插件的功能有点区别,不太一样,我待会看看能不能给你解释一下。
from postcss-mobile-forever.
插件的 maxDisplayWidth
的作用是让应用里的元素在大于一个宽度之后不再伸缩,而不是限制元素的最大值,比如设置 maxDisplayWidth: 1080
之后,页面会在屏幕宽度小于 1080 的时候等比例伸缩,而大于 1080 的时候,保持应用视图是 1080 宽度时的样式,不再继续等比例放大。
从你的截图可以看到 width: 1200px
转换成了 width: min(320vw, 3456px)
,这是因为你设置的标准宽度是 375("viewportWidth": file => file.includes("vant") ? 375 : 375
),插件的理解是,当屏幕宽度为 375px
时,你的元素宽度是 1200px,转换一下,标准宽度即 100vw
,那 1200px
是标准宽度的 3.2 倍,也即 320vw
。
同时你的截图里配置了 "maxDisplayWidth": 1080
,这个属性限制了 320vw
必须在屏幕宽度大于 1080px
后停止继续扩大,插件利用 CSS 函数 min,结合元素在标准宽度时的宽度 1200px
进行计算,可以得到在 1080 像素宽度时,这个元素的宽度应该是固定的 3456px
(1200*1080/375)。
from postcss-mobile-forever.
按照你的说法,也就是在可布局区域中再划分出一块区域来作为viewport,那么这个划分出来的viewport应该会在原来的可布局区域里居中。
问题:viewport为375,maxDisplayWidth为600,在移动端宽为1080的手机没有看到布局居中,这是为什么,而在pc端是有看到布局居中的
from postcss-mobile-forever.
移动端忘了提了,因为现在编写页面,一般会给页面加上一个 viewport 的 meta 标签,这个标签可以让移动端的 1 个像素相当于多个实际像素,这样,当手机分辨率越来越高,实际宽度像素越来越大,展示页面的差距也不会太大。
from postcss-mobile-forever.
按照我目前的配置和你的解释,maxDisplayWidth只作用于pc端,这样理解有问题吗
from postcss-mobile-forever.
有问题,如果你把 maxDisplayWidth
设置成 200,就会看到在移动端也居中了。插件转换的结果不会识别 pc 端还是移动端,只和宽度有关。
from postcss-mobile-forever.
麻烦解释下这段代码的作用:min函数右边数值的计算规则:(设置的px * maxDisplayWidth / viewport)
from postcss-mobile-forever.
最大宽度除标准宽度是放大的比值,比值乘以标准视图下的长度像素,就是最大宽度时的长度像素。
from postcss-mobile-forever.
请问需要作用于vant的组件的属性,需要如何配置? 是否本插件只作用于css文件,不作用style属性
from postcss-mobile-forever.
文档配置参数一节,第一个参数 viewportWidth
里提到了怎么给 Vant 配置,如果你的标准视图宽度是 750,这样设置 viewportWidth 即可,viewportWidth: file => file.includes("vant") ? 375 : 750
。
文档的开头提到:
postcss-mobile-forever 可以配合 scale-view 使用,前者用于编译阶段,后者用于运行阶段。
如果你的 css 文件用于编译阶段,那就会生效,通常 style 属性都是在运行时生效,所以不走 PostCSS 编译,因此也不会生效。
from postcss-mobile-forever.
非常感谢你耐心的解答
from postcss-mobile-forever.
Related Issues (20)
- vue-cli + vue2 + vant2 + postcss-px-to-viewport 不生效 HOT 6
- 可以做到屏幕小于某个值以后,就不再收缩而是超出部分隐藏吗 HOT 13
- 魅族浏览器不支持css min函数,导致样式失效 HOT 5
- The use of version Next.js is not effective. HOT 5
- feat: 支持运行时转换 HOT 3
- 请问一下,用的antd-mobile,Popup这个组件该如何处理? HOT 7
- unocss 的 @apply 指令写样式没有把 px 转换为 vw,正常写法是可以转换的 HOT 3
- angular 里面可以使用吗? HOT 1
- 如果我希望在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
- postcss-mobile-forever版本4.1.2在 Vue3 vite5 配置不生效 HOT 4
- 媒体查询中的 vw 转换 HOT 10
- Vant4项目使用之后popup的mask半透明黑色背景不会宽度100%了 HOT 2
- 在webcompent组件中不生效,已禁用shadow HOT 6
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.