V2EX = way to explore V2EX 是一个关于分享和探索的地方
Sign Up Now For Existing Member Sign In
This topic created in 4320 days ago, the information mentioned may be changed or developed.
很久之前，用过960的响应式，总感觉怪怪的。现在几个项目都用上了 unsemantic，看起来适应性还可以。
优点：
1、自由。unsemantic 是用百分比来设定宽度，只要能整除100就可以(33%)也算，例如 div.grid-33.tablet-grid-50.mobile-rid-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/
大家来介绍下自己用的响应式框架吧，简单介绍一下：）马克。
优点：
1、自由。unsemantic 是用百分比来设定宽度，只要能整除100就可以(33%)也算，例如 div.grid-33.tablet-grid-50.mobile-rid-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 replies 2014-07-06 22:39:28 +08:00
 | 1 dimlau Jul 2, 2014 人肉手写。 |
 | 2 civet Jul 2, 2014 这类框架都是冗余多了。但是省时间。貌似书上还介绍过一堆CSS Grid System |
 | 3 zencoding Jul 2, 2014 我用 purecss.io |
 | 7 tushiner Jul 2, 2014 人肉手写，前端框架是给做外包的没前途的人用的 |
 | 8 davepkxxx Jul 2, 2014 从来都是手写…… |
 | 9 jsonline Jul 2, 2014 via Android 手写 media query |
 | 10 tonylua Jul 2, 2014 现在的小孩离开框架活不了了吗 尤其是CSS还框架 蛋疼 |
 | 13 lijsh Jul 2, 2014 人肉手写足矣 |
 | 14 vivianalive Jul 2, 2014 手写总是最快, 最简洁, 最轻量, 可读性, 可维护性最好的办法. 框架带来的冗余代码实在太多了. |
 | 15 adspe Jul 2, 2014 purecss |
 | 16 scarlex Jul 2, 2014 手写 |
 | 17 l917716606 Jul 2, 2014 Meteor |
 | 18 yangzh Jul 2, 2014 最常见的不是用 bootstrap 和 foundation 吗？ |
 | 19 kmvan OP 还真别说，960大家都应该听过吧。刚才我一看，发现 unsemantic 的作者居然就是960的作者， |
 | 20 tokki Jul 2, 2014 我是自己改造的pure |
 | 21 P233 Jul 2, 2014 在用改造过的 bourbon neat，正在写自己的一套 gird system |
 | 22 krafttuc Jul 2, 2014 人肉 |
 | 23 zythum Jul 2, 2014 刚人肉写了一个... |
 | 24 itommy Jul 2, 2014 作者太幽默了 在页面底部： "Note: If you reached this site by mistake, perhaps you are seeking Unsemantic's arch nemesis… Semantic.com" |
 | 25 julio867 Jul 4, 2014 用了960和Bootstrap之后，觉得最灵活的响应式应该是自己写的框架，根据项目特点来定，不一定要网格系统；而且，响应式设计本身，并非是使用某个框架就可以解决的事情，它涉及到产品、交互、设计、技术等若干个环节；再者，如果最初的响应式设计的思想是停留在使用 media query 适应不同的设备的话，那么现在的响应式思想已经发展更远了，已经不再是单纯的“设备”的响应，而是“内容”的响应~~ |
1 | 28 julio867 Jul 5, 2014 @kmvan 目前来说内容与设备还是无法分开的，相辅相成，我也没用过我觉得满意的框架可以解决我遇到的问题，也希望大家能提供~~不过，产品、交互、设计、技术等相关人员还是得对响应式设计有深刻的体会，才能设计出好的产品并形成自己的“框架”，如果这些角色能集中于一个人身上，那应该是最完美的了~ |
 | 29 dofaith09 Jul 6, 2014 purecss.io +1 |
Select Language