响应式布局之入门学习篇

学习响应式网站设计已经持续了一段时间,对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          

时间: 2024-11-13 09:43:14

响应式布局之入门学习篇的相关文章

web多终端开发学习系列(一)--- 响应式布局框架BootStrap学习

最近在温习web的开发,毕业之后就没接触web开发了.当时HTML5在国内貌似还是刚刚起步,能适配HTML5的浏览器很少.移动界面框架也才刚刚开始,记得当时曾经学过sencha touch的移动框架以及jquery mobile框架.这两个框架都对响应式布局进行了不错的适配及实现.响应式布局说白了就是对于多个移动终端只需一个界面即可全部适配,可大大地减少开发的工作量. 最近一年Bootstrap开始广泛地被使用了,基于此框架开发出来的插件数不胜数.所以我花了几天时间学习了下Bootstrap,本

grid实现响应式布局

一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局 在这篇文章中,我将教你如何使用 CSS Grid(网格) 布局来创建一个超酷的图像网格,它会根据屏幕的宽度改变列的数量,以实现响应式布局. 而这篇文章中最漂亮的部分是:添加一行 CSS 代码即可实现响应式布局. 这意味着我们不必通过丑陋的类名(即 col-sm-4,col-md-8)来混淆 HTML ,或者为每一个屏幕尺寸创建媒体查询. 现在就让让我们开始吧! 设置 对于本文,我们将继续使用 5分钟学会 CSS Grid 布

一步步开发自己的博客 .NET版 剧终篇(6、响应式布局 和 自定义样式)

前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做个插件,任何网站上的技术文章都可以转发收藏 到本博客. 所以打算写个系类:<一步步搭建自己的博客> 一步步开发自己的博客  .NET版(1.页面布局.blog迁移.数据加载) 一步步开发自己的博客  .NET版(2.评论功能) 一步步开发自己的博客  .NET版(3.注册登录功能) 一步步开发自己

响应式布局入门

最近研究响应式设计框架的时候,发现网上很多相关的属性介绍,却很少有系统的入门级使用的文章,我自己整理了一篇入门知识,并没有什么高深的理论,也不牵扯到框架. 目前已经越来越多的站点以及wap站点使用响应式设计,因为大屏幕的移动设备越来越普及.而自适应布局已经无法胜任各种浏览需求.响应式设计的目的是尽可能以最好的布局显示您的数据,以实现用户友好的 Web 页面. css2的时期有一个不是很常用的media type,他拥有比如aural(声音)braille(触摸)print(打印)handheld

前端框架bootstrap(响应式布局)入门

Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加bootstrap固定的class样式,就可以轻松完成指定效果的实现. 作用: 1.Bootstrap使得Web开发更加快捷,高效 2.Bootstrap支持响应式开发,解决了移动互联网前端开发问题. 简单介绍一下: 该框架是Twitter公司的设计师Mark Otto和jacob Thornton

响应式布局与弹性布局基础篇

响应式布局与弹性布局 一.响应式布局 1.响应式布局的概念 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. 2.响应式布局的实现 2

响应式布局学习笔记

静态.自适应.流式.响应式四种网页布局有什么区别? 静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分:对于移动设备,单独设计一个布局,使用不同的域名如wap.或m.. 适应布局(Adaptive Layout)自适应布局(Adaptive)的特点是分别为不同的屏幕分辨率定义布局.布局切换时页面元素发生改变,但在每个布局中,页面元素不随窗口大小的调整发生变化. 流式布局(Liquid Layout)流式

[学习笔记]viewport定义,弹性布局,响应式布局

一,移动端宽度设置viewport视图窗口,<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">,视窗宽度=设备宽度,默认缩放=1,不允许用户缩放. 二,flexbox,弹性盒子模型:1,在元素的css中添加display:-webkit-flex就可以转换成弹性盒模型了,然后在多个子元素的CSS中添加flex:1/2/3,就可以让子元素按

Bootstrap响应式布局以及栅格框架

一.Bootstrap简单配置简单使用Bootstrap,只需引入: <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/bootstrap.js" ></script> <link rel="stylesheet&q