Comments (13)
可以,什么时候需要这种场景?超出部分隐藏不是无法查看了吗?
from postcss-mobile-forever.
我是用它来做web端的适配,我不希望当窗口越来越小以后,里面的东西也跟着越来越小,导致布局变乱,希望能够在缩小到某个宽度以后就不在缩小,而是地步出现滚动条,让用户滚动来看
from postcss-mobile-forever.
了解,我目前还是不加这个属性了。主要是因为 fixed
定位的元素在限制最小宽度的情况下不是很好处理,但是在限制最大宽度的情况下,fixed
是能处理的,插件也已经处理了,所以如果实现这个功能的话,最小宽度和最大宽度两种情况下,fixed
定位的处理不能对应,所以还是暂时不在这个插件实现这个功能了。
有另外一个插件给您参考,postcss-px-to-clamp,这个插件只转换 px 到 vw,而且限制最大和最小尺寸,但是这个插件有点 bug,如果放到你项目没影响的话可以试试,我以后可能也会写个这个插件,至少把他项目里这些 bug 解决一下。
或者的话还有个方法,你就用 postcss-px-to-viewport 做适配,然后用 iframe 套你的页面,反正 iframe 可以设置 max-width
和 min-width
,这个就简单多了。
from postcss-mobile-forever.
我之前的用的就是postcss-px-to-viewport,就是存在缩的很小的,布局就会乱,那请问下怎么使用ifram来套页面呢
from postcss-mobile-forever.
我今天晚点给你在这发个 demo
from postcss-mobile-forever.
可以参考下上面这个文件夹,点击就可以下载了,里面的 index.html
文件、css
和 js
文件夹是经过 postcss-px-to-viewport 编译后的产包,index-iframe.html
是我自己新建的文件,用了 iframe 引入产包的 index.html
。
from postcss-mobile-forever.
我按照你的方式,在react项目将之前的index.html改名,新建一个index.html,然后引入,但是ifram里面的内容还是缩小改变呀,是为什么呢,请问下应该怎么弄呢
from postcss-mobile-forever.
给 <iframe>
标签设置 max-width
和 min-width
即可,就和其它平常使用的 <div>
之类的标签一样。实在不行你把产包发给我,把产包压缩,然后在输入框粘贴就行了。
from postcss-mobile-forever.
但是src 不是要把自己的react项目放进去吗,我放的是index。html的的位置,可以显示内容,但是缩小屏幕以后布局还是会乱,难道你的意思的直接改打包文件的build 下面的index.html吗,我也试过还是不行啊
from postcss-mobile-forever.
好像的确是不行,如果项目有路由,在 iframe 里切换页面路由不变。要不你再试试之前的 postcss-px-to-clamp,我看他昨天更新了插件修复了 bug,他配置里的参数 maxViewportWidth
和 minViewportWidth
要写单位:
{
"maxViewportWidth": "1920px",
"minViewportWidth": "1200px"
}
from postcss-mobile-forever.
我试过了,那个插件的px转vw有些问题,缩小屏幕会样式会有问题,感谢大佬,我在看看还没有其他法子
from postcss-mobile-forever.
哈哈,不客气,加油
from postcss-mobile-forever.
最新版本 4.0.1 已添加新属性 experimental.minDisplayWidth
来限制最小宽度,可以像下面这样配置:
{
"appSelector": "#app",
"maxDisplayWidth": 1440,
"experimental": {
"minDisplayWidth": 980
}
}
from postcss-mobile-forever.
Related Issues (20)
- 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
- 设置了之后移动端和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
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.