V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
kmvan
V2EX  ›  设计

响应式设计,我选择 unsemantic.css 框架,大家的选择呢?

  •  
  •   kmvan · 2014-07-02 12:39:44 +08:00 · 5803 次点击
    这是一个创建于 3808 天前的主题,其中的信息可能已经有所发展或是发生改变。
    很久之前,用过960的响应式,总感觉怪怪的。现在几个项目都用上了 unsemantic,看起来适应性还可以。

    优点:
    1、自由。unsemantic 是用百分比来设定宽度,只要能整除100就可以(33%)也算,例如 div.grid-33.tablet-grid-50.mobile-grid-100(PC上显示3列,Pad上显示2列,手机上显示1列),这样看起来算是比较友好吧,不用管16grid还是24grid之类的。
    2、使用 box-sizing:border-box 属性,方便设计,老式浏览器需要用js兼容。

    缺点:
    1、冗余。正如其名,unsemantic,无语义化,不仅是命名的class无语义化,甚至连盒子元素(div之类)的也是无语义化,严格来说是冗余。因为他的列距是用 padding 的!所以子元素想要用颜色填充该列,不能够 <a.grid-50>BLOCK</a> 这样写,而要 <div.grid-50><a>BLOCK</a></div> 这样写。
    2、使用 box-sizing:border-box 属性,老式浏览器需要用js兼容。


    附上框架homepage: http://unsemantic.com/

    大家来介绍下自己用的响应式框架吧,简单介绍一下:)马克。
    29 条回复    2014-07-06 22:39:28 +08:00
    dimlau
        1
    dimlau  
       2014-07-02 13:03:45 +08:00
    人肉手写。
    civet
        2
    civet  
       2014-07-02 13:11:06 +08:00
    这类框架都是冗余多了。但是省时间。貌似书上还介绍过一堆CSS Grid System
    zencoding
        3
    zencoding  
       2014-07-02 13:25:24 +08:00
    我用 purecss.io
    kmvan
        4
    kmvan  
    OP
       2014-07-02 13:25:46 +08:00
    @civet 我一看,还以为我自己!
    civet
        5
    civet  
       2014-07-02 13:35:12 +08:00
    git clone @kmvan 感觉画风不一样于是再换了一下,还是q版顺眼
    foomorrow
        6
    foomorrow  
       2014-07-02 13:55:21 +08:00
    @zencoding purecss +1
    tushiner
        7
    tushiner  
       2014-07-02 14:01:05 +08:00
    人肉手写,前端框架是给做外包的没前途的人用的
    davepkxxx
        8
    davepkxxx  
       2014-07-02 14:06:38 +08:00
    从来都是手写……
    jsonline
        9
    jsonline  
       2014-07-02 14:10:08 +08:00 via Android
    手写 media query
    tonylua
        10
    tonylua  
       2014-07-02 14:12:46 +08:00
    现在的小孩离开框架活不了了吗 尤其是CSS还框架 蛋疼
    kmvan
        11
    kmvan  
    OP
       2014-07-02 14:22:33 +08:00
    @tonylua 实际上所谓的“框架”,估计跟你认识中的“框架”有所不同,更准确来说,我觉得称呼为“方案”比较合适。
    kenis
        12
    kenis  
       2014-07-02 14:38:24 +08:00
    @zencoding Pure +1,轻量简洁
    lijsh
        13
    lijsh  
       2014-07-02 14:39:48 +08:00
    人肉手写足矣
    vivianalive
        14
    vivianalive  
       2014-07-02 14:47:07 +08:00
    手写总是最快, 最简洁, 最轻量, 可读性, 可维护性最好的办法.

    框架带来的冗余代码实在太多了.
    adspe
        15
    adspe  
       2014-07-02 15:20:45 +08:00
    purecss
    scarlex
        16
    scarlex  
       2014-07-02 15:32:13 +08:00
    手写
    l917716606
        17
    l917716606  
       2014-07-02 15:39:08 +08:00
    Meteor
    yangzh
        18
    yangzh  
       2014-07-02 16:24:46 +08:00
    最常见的不是用 bootstrap 和 foundation 吗?
    kmvan
        19
    kmvan  
    OP
       2014-07-02 17:10:57 +08:00
    还真别说,960大家都应该听过吧。刚才我一看,发现 unsemantic 的作者居然就是960的作者,囧
    tokki
        20
    tokki  
       2014-07-02 17:16:57 +08:00
    我是自己改造的pure
    P233
        21
    P233  
       2014-07-02 17:52:45 +08:00
    在用改造过的 bourbon neat,正在写自己的一套 gird system
    krafttuc
        22
    krafttuc  
       2014-07-02 18:30:27 +08:00
    人肉
    zythum
        23
    zythum  
       2014-07-02 18:40:15 +08:00
    刚人肉写了一个...
    itommy
        24
    itommy  
       2014-07-02 18:40:24 +08:00
    作者太幽默了

    在页面底部:
    "Note: If you reached this site by mistake, perhaps you are seeking Unsemantic's arch nemesis… Semantic.com"
    julio867
        25
    julio867  
       2014-07-04 17:10:50 +08:00
    用了960和Bootstrap之后,觉得最灵活的响应式应该是自己写的框架,根据项目特点来定,不一定要网格系统;而且,响应式设计本身,并非是使用某个框架就可以解决的事情,它涉及到产品、交互、设计、技术等若干个环节;再者,如果最初的响应式设计的思想是停留在使用 media query 适应不同的设备的话,那么现在的响应式思想已经发展更远了,已经不再是单纯的“设备”的响应,而是“内容”的响应~~
    zencoding
        26
    zencoding  
       2014-07-04 20:58:31 +08:00 via iPad   ❤️ 1
    @julio867 大赞
    kmvan
        27
    kmvan  
    OP
       2014-07-04 23:20:27 +08:00 via Android   ❤️ 1
    @julio867 确实,内容响应更要要高点,夶有啥关于内容响应的库呢?
    julio867
        28
    julio867  
       2014-07-05 17:59:40 +08:00
    @kmvan 目前来说内容与设备还是无法分开的,相辅相成,我也没用过我觉得满意的框架可以解决我遇到的问题,也希望大家能提供~~不过,产品、交互、设计、技术等相关人员还是得对响应式设计有深刻的体会,才能设计出好的产品并形成自己的“框架”,如果这些角色能集中于一个人身上,那应该是最完美的了~
    zyx89513
        29
    zyx89513  
       2014-07-06 22:39:28 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1033 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 20:16 · PVG 04:16 · LAX 12:16 · JFK 15:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.