你的位置:首页 > 网页设计

[网页设计]响应式布局之入门学习篇


学习响应式网站设计已经持续了一段时间,对sass,less,compass,grunt等等有了整体上的了解认识,但是由于产品的不可预知性,以及前端要求使用sass语言而且不适用bootstrap,所以很多现有的响应式框架如Bootstrap,Golden Grid system,less Framework 4 ,Skelton等都无法使用,选来选去决定使用susy框架,susy使用sass书写,同时,Susy 的设计初衷是作为 Compass 平台的一部分,所以,使用 Compass。

 susy的官方简介是这么描述susy的:“Your markup, your design, your opinions, out math.”因为她的设计初衷是一款进行栅格布局的辅助工具,这就决定了她不是一个css框架,很多css组件,js组件她都没有。

form元素在网站中的地位是非常重要的,<input>,<button>,<textarea>,<select>以及<label>,<a>等元素在网页中随处可见。这些样式中的复用性非常高,一个sass buttons组件非常不错叫做: Sassy Buttons,网址http://jaredhardy.com/sassy-buttons/使用她可以快速构建出适合可用又漂亮的buttons组件,bootstrap中的表单样式的多样化,合理的html及css dom安排同样有我们学习的地方。

http://bourbon.io/ Bourbon在这个领域做的也不错,标记一下。

两篇susy入门的文章1:http://www.w3cplus.com/preprocessor/susy-docs.html

         2:http://www.w3cplus.com/preprocessor/susy2-tutorial.html

susy官网: http://susy.oddbird.net/

Responsive设计和CSS3 Media Queries的结合: http://www.w3cplus.com/css3/responsive-design-with-css3-media-queries

一篇响应式网站设计建议:http://www.qianduan.net/responsive-web-design/

 

一篇介绍use-css3-media-queries的文章:http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

w3c 中media-queries的文章: http://www.w3.org/TR/css3-mediaqueries/#media0

CSS Media Queries & Using Available Space:https://css-tricks.com/css-media-queries/   

30+ CSS Grid System:http://www.w3cplus.com/source/30-css-grid-system.html