V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
wsWmsw
V2EX  ›  前端开发

兼容宽屏的移动端页面适配方法

  •  
  •   wsWmsw · 30 天前 · 215 次点击

    V 友们好,推一下我的一个插件,这个插件用来做只有一份移动端设计稿、同时又希望兼容桌面端的项目非常合适。这个插件会把移动端的固定宽度视图转化为可伸缩的视图,同时限制视图的最大宽度,当达到某一宽度,视图就不再变化了,永远停留在那个移动端页面的模样,这样的适配会让用户在桌面端也得到良好的用户体验。

    这个插件的名字是 postcss-mobile-forever ,项目托管在 Github 上,地址是 https://github.com/wswmsword/postcss-mobile-forever,项目主页上有非常详细的文档。

    使用时,它的配置非常简单,不考虑特殊情况,三行就能完成:

    {
      "viewportWidth": 750,
      "maxDisplayWidth": 560,
      "appSelector": "#app"
    }
    

    图片展示了经过 mobile-forever 插件转换的界面,在 Mac 、iPad 、iPhone 上的模样

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2242 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 10:07 · PVG 18:07 · LAX 03:07 · JFK 06:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.