澳门新濠影汇登录[官方网站]

澳门新濠影汇登录,professional供给集团官网网站制作,网站策划,建网站效劳

响应式计划开发-框架小case

日期:2013-07-24 点击:

1.什么是响应式计划?

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

2.怎么策划响应式计划?

①利用CSS中的Media Query

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


使用方法:
@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}
示例一:在link中使用@media:
<link rel=“stylesheet” type=“text/css” media=“only screen and (max-width: 480px),only screen and (max-device-width: 480px)” href=“link.css”/>
上面使用中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)

小注:用上端框架开发响应式计划是比较easy的,只要看懂它们的文档莫过于都不是难办到;难办的是要了解这些框架的优劣在哪关键然下再看自己软件porject适合哪一类上端框架。譬喻我想用HTML5soG5和52的框架就非常合适,再如我想用组件比较多的那我想BootStrap和YUI3是合适的。
总之要看清自己的软件porject的特点来选定上端框架。

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



Tag:响应式计划 | 上端框架 |

推荐消息

最新消息

LATEST NEWS

填写您的网站建造需求给吾们。

*请认真填写需求信息,吾们会在24钟点内与您取得联系。

澳门新濠影汇登录

professional供给深圳集团官网网站建造、定制策划

深圳市龙华新区

东边牛逼商用大楼3066

电话:0755-2868 4353

邮箱:service@sz-qibang.com

  • 深圳网站建造 | 网站建造案例 | 网站建造分享 | 深圳网站建造集团官网 | 网站建造报价咨询 | 深圳网站建造集团官网联系方式

    Copyright ?2019 澳门新濠影汇登录 版权一切 广ICP备13054229号-1 网站地图 会帐方式

XML 地图 | Sitemap 地图