问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

postcss-px-to-viewport 怎么限制最大宽度

头像
AKclown
    5421940

    vue移动端开发

    使用了postcss-px-to-viewport来进行适配操作。应该限制body的最大宽度呢？
类似下面这种效果
https://m.lvmama.com/

    希望大佬能给予解答，感谢

    vue.jsjavascripthtml5
    阅读 13k
    5 个回答
    得票最新
    头像
    lmwa
      221

      大佬postcss-px-to-viewport 限制了最大宽度，但是px转测vw后超过最大限制还是会随着屏幕的变大而变大，这个怎么解决啊

      头像
      trsoliu
        1
        新手上路，请多包涵

        写个媒体查询，在最外层加
        transform: scale(0.5, 0.5);
        transform-origin: 50% 0;

        头像
        wswmsword
          21
          新手上路，请多包涵

          纯 css 的话，有两个办法，一种用 px 生成两套代码，一套移动端的 vw 视图，一套最大宽度的媒体查询代码，另一种方法是用类似 min(vw, px) 的 css 函数限制 vw 的最大值。

          我最近写了个 postcss 插件，postcss-mobile-forever，可以实现限制最大宽度，和你提供的链接网站形式类似，原理就是我上面说的，提供了两个办法，把新 px 放到插件生成的媒体查询里，或者转为 css 函数。

          最后可以实现移动端、桌面端和移动端横屏都有蛮好的展示效果。

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

          Github 主页：https://github.com/wswmsword/postcss-mobile-forever
          npm 主页：https://www.npmjs.com/package/postcss-mobile-forever

          头像
          小阿飞
            163

            通过 iframe 嵌套 vw 伸缩界面，来达到限制最大宽度的目的，例如：

            <style>
  body {
    margin: 0;
  }
  #iframe {
    max-width: 520px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: block;
  }
</style>
<body>
  <!-- vw-index.html 为 postcss-px-to-viewport 转换后的伸缩界面 -->
  <iframe id="iframe" src="./vw-index.html" frameborder="0"></iframe>
<body>
            头像
            林枫
              4k1828
              头像
              汝何不上九霄
                4.8k61947
                selectorBlackList: ['.ignore', '.hairlines'], // (Array) 指定不转换为视窗单位的类，可以自定义

                然后给你要设置max-width的元素添加class，以selectorBlackList里面的某项开头，比如

                <div class=".ignore_max_w"></div>
css:
.ignore_max_w{
    max-width:650px;
}
                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题