建站资讯

响应式布局开发-框架问题

2013-07-24 00:40:40

浏览:

1.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端而不是为每个终端做一个特定的版本的布局方式。(摘自度娘)

1.什么是响应式布局?

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本的布局方式。(摘自度娘)

2.怎么设计响应式布局?

①利用CSS中的Media Query

设备的宽和高device-width,device-heigth显示屏幕/触觉设备。
渲染窗口的宽和高width,heigth显示屏幕/触觉设备。
设备的手持方向,横向还是竖向orientation(portrait|lanscape)和打印机等。
画面比例aspect-ratio点阵打印机等。
设备比例device-aspect-ratio-点阵打印机等。
对象颜色或颜色列表color,color-index显示屏幕。
设备的分辨率resolution。


使用方法:
@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}
示例一:在link中使用@media:

上面使用中only可省略,限定于计算机显示器,第一个条件max-width是指渲染界面最大宽度,第二个条件max-device-width是指设备最大宽度。

示例二:在样式表中内嵌@media:
@media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}
在示例二中,设置了电脑显示器分辨率(宽度)大于或等于1024px(并且最大可见宽度为989px);屏宽在480px及其以下手持设备;屏宽在480px以及横向(即480尺寸平行于地面)放置的手持设备;屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。
从上面的例子可以看出,字符间以空格相连,选取条件包含在小括号内,srules为兼容设置的样式表,包含在中括号里面。
only(限定某种设备,可省略),and(逻辑与),not(排除某种设备)为逻辑关键字,多种设备用逗号分隔,这一点继承了css基本语法。

 

小注:这个方法就是开放性的开发,所有js、css都要前端人员去书写进度缓慢。

 

②利用前端框架开发


我推荐的10个前端框架有很多种比如
1. Twitter BootStrap (Apache v2.0;响应式)
2. Foundation (MIT;响应式)
3. 960gs(GPL&MIT;响应式)
4. Skeleton(MIT;响应式)
5. Kube(Free;响应式)
6. Less Framework(MIT;响应式)
7. G5 Framework(Free;HTML5、CSS、PHP)
8. YAML(Creative Commons)
9. YUI3:Grids CSS(BSD)
10.52framework(Creative Commons;HTML5)

小注:用前端框架开发响应式布局是比较简单的,只要看懂它们的文档其实都不是难办到;难办的是要了解这些框架的优劣在哪方面然后再看自己软件项目适合哪一类前端框架。比如我想用HTML5那么G5和52的框架就非常合适,再如我想用组件比较多的那我想BootStrap和YUI3是合适的。
总之要看清自己的软件项目的特点来选定前端框架。

原文地址:http://www.zcool.com.cn/article/ZNDg1NzI=.html

作者: admin
响应式布局开发-框架问题
1.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端而不是为每个终端做一个特定的版本的布局方式。(摘自度娘)
长按图片保存/分享

深圳网站建设公司

启邦互动,深圳网站建设公司,致力于帮助深圳企业提供公司网站建设,手机网站建设,外贸网站建设,电商网站建设,学校网站建设

网站建设资讯

联系方式

深圳市龙华区大和路翠湖商务中心0210

Call us : + 137 2425 9054

Email us : service@sz-qibang.com

在线咨询

您好,请点击在线客服进行在线沟通!

联系方式
热线电话
400-12346578
上班时间
周一到周五
E-mail地址
123456@qq.com
扫一扫二维码
二维码
添加微信好友,详细了解产品
使用企业微信
“扫一扫”加入群聊
复制成功
添加微信好友,详细了解产品
我知道了