Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

有办法大于一定宽度不继续缩放了么? #130

Open
frank-pian opened this issue Apr 4, 2022 · 9 comments
Open

有办法大于一定宽度不继续缩放了么? #130

frank-pian opened this issue Apr 4, 2022 · 9 comments

Comments

@frank-pian
Copy link

比如正常1400px宽度适配,小于1400px进行缩放,但是大于1400px的屏幕没必要放大,这样可以多显示一些内容。

@kubixiaoguo
Copy link

遇到同样的问题,解决了么?

@frank-pian
Copy link
Author

我不用vw了,改成自动转换rem了。。。
然后在写个媒体查询

@Soonze
Copy link

Soonze commented May 10, 2022

同求,希望有个maxWidth

@godingchen
Copy link

好像只能寫兩套代碼,這個沒辦法自適應

@fangmd
Copy link

fangmd commented Feb 7, 2023

我是配置媒体查询不做 px-vw 的转化,然后把写好的css复制一份到媒体查询中

@wswmsword
Copy link

wswmsword commented Feb 11, 2023

可以通过媒体查询或者 css 函数限制最大宽度,这样就没有“大屏大字”的问题了。

可以试下我这两天写的 postcss 插件,postcss-mobile-forever。这个插件提供了两种方法,一个是媒体查询(默认方法),另一个是 css 函数。媒体查询会生成桌面端和横屏两套代码,因此代码量较大,相对可以使用另一种 css 函数的方法,这种方法的代码量会少一些,同时 css 函数不能像媒体查询一样分配两个宽度,仅仅会在大于设定的一个宽度后不再变化,所以媒体查询的方法对于希望区分横屏和桌面端的情况,展示效果又更理想。

npm install postcss postcss-mobile-forever --save-dev

@uxzhen
Copy link

uxzhen commented Jul 19, 2023

内嵌一次就行了

<title></title> <iframe id="iframe" src="./index.html" frameborder="0"></iframe> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background: #eee; } #iframe{ background: #fff; display: block; width: 768px; height: 100vh; margin: 0 auto; } </style>

@uxzhen
Copy link

uxzhen commented Jul 19, 2023

<iframe id="iframe" src="./index.html" frameborder="0"></iframe> 嵌套一下,然后给iframe设置宽度,因为单位是vw,index的100vw就是iframe的宽度

@guda-art
Copy link

求官方解决一手, 确实有用

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants