V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
yunmoxue
V2EX  ›  问与答

问 2 个小白问题:响应式框架大家都用哪些?

  •  
  •   yunmoxue · 2014-06-23 14:30:16 +08:00 · 3479 次点击
    这是一个创建于 3831 天前的主题,其中的信息可能已经有所发展或是发生改变。
    更详细点的:

    之前简单用过bootstrap,觉得固定12个网格太死板,不灵活.
    [1.我的看法对吗?]


    今天看到pure,觉得不错
    [2.除了bootstrap,你们一般用哪个框架开发,还是直接手写?]


    谢谢..
    6 条回复    2014-06-24 11:15:58 +08:00
    gangsta
        1
    gangsta  
       2014-06-23 15:22:47 +08:00   ❤️ 1
    1.栅格系统是默认最多将页面分为12列,而不是你理解的"固定12个网格"
    个人觉得使用起来挺"灵活"的...

    建议细读下文档:
    http://getbootstrap.com/css/#grid
    http://getbootstrap.com/css/#responsive-utilities

    2.页面特别简单的时候都是自己写的
    最简单的方式就是把针对移动设备优化后的样式塞到媒体查询里面
    单页面或者blog之类的足以应付:

    http://gist.github.com/50339cdfa3512522959b

    推荐这篇文章:
    http://www.jiawin.com/response-type-layout-design/

    iOS设备的Media Queries:
    http://stephen.io/mediaqueries
    crysislinux
        2
    crysislinux  
       2014-06-23 15:36:24 +08:00   ❤️ 1
    chloerei
        3
    chloerei  
       2014-06-23 15:39:54 +08:00   ❤️ 1
    看看别人怎么用 bootstrap 的 http://expo.getbootstrap.com/
    icyflash
        4
    icyflash  
       2014-06-23 16:00:51 +08:00 via Android
    fundation
    yunmoxue
        5
    yunmoxue  
    OP
       2014-06-24 10:28:27 +08:00
    @gangsta
    谢谢您的回复,我的疑惑在于
    如果一行有7个div块需要均匀分布,用bootstrap该如何实现?
    <div class="row">
    <div class=".col-md-1"></div>
    <div class=".col-md-1"></div>
    <div class=".col-md-1"></div>
    <div class=".col-md-1"></div>
    <div class=".col-md-1"></div>
    <div class=".col-md-1"></div>
    <div class=".col-md-1"></div>
    </div>
    ======================================
    刚刚试了试pure, 引用下pure-responsive-min.css就能实现了.
    http://purecss.io/grids/#using-grids-with-custom-fonts
    <div class="pure-g">
    <div class=".col-md-1-7"></div>
    <div class=".col-md-1-7"></div>
    <div class=".col-md-1-7"></div>
    <div class=".col-md-1-7"></div>
    <div class=".col-md-1-7"></div>
    <div class=".col-md-1-7"></div>
    <div class=".col-md-1-7"></div>
    </div>
    ======================================
    又看来下bootstrap的文档,有个container-fluid,无奈不知道肿么用...



    @crysislinux
    @chloerei
    @icyflash 谢谢你们的回复.就准备用pure/bootstrap, 现在想具体请教下bootstrap具体用法.
    yunmoxue
        6
    yunmoxue  
    OP
       2014-06-24 11:15:58 +08:00
    @gangsta
    又看了下,我弄错了,不好意思.
    之所以pure可以显示正常是因为我用了
    http://yui.github.io/gridbuilder/ pure的网格生成器.
    ------
    最新版的0.5.0在首页也可以自定义总列数.
    可以实现. 1-7.
    谢谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3416 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 10:54 · PVG 18:54 · LAX 02:54 · JFK 05:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.