CSS3中Animation动画的定义和调用
现在经常会看到一些门户网站的专题使用到CSS3的动画，咋也不能落伍，在此这梳理下动画知识吧，便于后面用到。接下来介绍下Animation动画的定义和调用，在介绍Animation之前需要了解下Keyframes，英文意思就是关键
现在经常会看到一些门户网站的专题使用到CSS3的动画，咋也不能落伍，在此这梳理下动画知识吧，便于后面用到。接下来介绍下Animation动画的定义和调用，在介绍Animation之前需要了解下Keyframes，英文意思就是关键帧，它相当于我们flash里面的帧。
Keyframes具有其自己的语法规则，他的命名是由&@keyframes&开头，后面紧接着是这个&动画的名称&加上一对花括号&{}&，括号中就是一些不同时间段样式 规则，有点像我们css的样式写法一样。对于一个&@keyframes&中的样式规则是由多个百分比构成的，如&0%&到&100%&之间，我们可以在 这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改变元素 颜色，位置，大小，形状等，不过有一点需要注意的是，我们可以使用&fromt&&to&来代表一个动画是从哪开始，到哪结束，也就是说这个 &from&就相当于&0%&而&to&相当于&100%&,值得一说的是，其中&0%&不能像别的属性取值一样把百分比符号省略，我们在这里必须加上百 分符号（&%&）如果没有加上的话，我们这个keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。
Keyframes可以指定任何顺序排列来决定Animation动画变化的关键位置。其具体语法规则如下：
&keyframes-rule:&'@keyframes'&IDENT&'{'&keyframes-blocks&'}';
&keyframes-blocks:&[&keyframe-selectors&block&]*&;
&keyframe-selectors:&[&'from'&|&'to'&|&PERCENTAGE&]&[&','&[&'from'&|&'to'&|&PERCENTAGE&]&]*;
none:表示不进么变换；&transform-function&表示一个或多个变换函数，以空格分开；换句话说就是我们同时对一 个元素进行transform的多种属性操作，例如rotate、scale、translate三种，但这里需要提醒大家的，以往我们叠加效果都是用逗 号（&，&）隔开，但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。
transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放 和移动元素 ，他有几个属性值参数：matrix。下面我们分别来介绍这几个属性值参数的具体使用方法：
我把上面的语法综合起来
&&@keyframes&IDENT&{
&&&&&from&{
&&&&&&&&&&&&&&Properties:Properties&
&&&&&Percentage&{
&&&&&&&&&&&&Properties:Properties&
&&&&&&&&&&&&Properties:Properties&
其中IDENT是一个动画名称，你可以随便取，当然语义化一点更好，Percentage是百分比值，我们可以添加许多个这样的百 分比，Properties为css的属性名，比如说left,background等，value就是相对应的属性的属性值。值得一提的是，我们 from和to 分别对应的是0%和100%。这个我们在前面也提到过了。到目前为止支技animation动画的只有webkit内核的浏览器，所以我需要在上面的基础 上加上-webkit前缀，据说Firefox5可以支持的 animation动画属性。
举个官方实例来，大伙就可以看得很清楚了，如下：
@-webkit-keyframes&'wobble'&{
&&&&&&&&margin-left:&100
&&&&&&&&background:&
&&&&&40%&{
&&&&&&&&margin-left:&150
&&&&&&&&background:&
&&&&&60%&{
&&&&&&&&margin-left:&75
&&&&&&&&background:&
&&&&&100%&{
&&&&&&&&margin-left:&100
&&&&&&&&background:&
这里我们定义了一个叫&wobble&的动画，他的动画是从0%开始到100%时结束，从中还经历了一个40%和60%两个过程，上面代码具体意思 是：wobble动画在0%时元素定位到left为100px的位置背景色为green，然后40%时元素过渡到left为150px的位置并且背景色为 orange，60%时元素过渡到left为75px的位置,背景色为blue，最后100%结束动画的位置元素又回到起点left为100px处,背景 色变成red。
定义好动画，如何调用呢，如下：
&&&&&width:&50
&&&&&height:&50
&&&&&margin-left:&100
&&&&&background:&
&&&&&-webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/
&&&&&-webkit-animation-duration:&10s;/*动画持续时间*/
&&&&&-webkit-animation-timing-function:&ease-in-&/*动画频率，和transition-timing-function是一样的*/
&&&&&-webkit-animation-delay:&2s;/*动画延迟时间*/
&&&&&-webkit-animation-iteration-count:&10;/*定义循环资料，infinite为无限次*/
&&&&&-webkit-animation-direction:&/*定义动画方式*/
可能大伙看到上面不是很了解，我们看下其属性的语法，再回来看这个例子就很清楚了
一、animation-name:
&&animation-name:&none&|&IDENT[,none&|&IDENT]*;
取值说明：
animation-name:是用来定义一个动画的名称，其主要有 两个值：IDENT是由Keyframes创建的动画名，换句话说此处的IDENT要和Keyframes中的IDENT一致，如果不一致,将不能实现任 何动画效果；none为默认值，当值为none时，将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样，我们可以同时附几个 animation给一个元素，我们只需要用逗号&，&隔开。
二、animation-duration：
&&animation-duration:&&time&[,&time&]*
取值说明：
animation-duration是用来指定元素播放动画所持续的时间长，取值:&time&为数值，单位为s （秒.）其默认值为&0&。这个属性跟transition中的transition-duration使用方法是一样的。
三、animation-timing-function:
&&&animation-timing-function:ease&|&linear&|&ease-in&|&ease-out&|&ease-in-out&|&cubic-bezier(&number&,&&number&,&&number&,&&number&)&[,&ease&|&linear&|&ease-in&|&ease-out&|&ease-in-out&|&cubic-bezier(&number&,&&number&,&&number&,&&number&)]*
&取值说明：
animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。他和transition中的transition-timing-function一样，具有以下六种变换方式：ease-ease-in-cubic-bezier。具体的使用方法如下：
transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值：
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
其是cubic-bezier为通过贝赛尔曲线来计算&转换&过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.
四、animation-delay:
&&animation-delay:&&time&[,&time&]*
&取值说明：
animation-delay:是用来指定元素动画开始时间。取值为&time&为数值，单位为s(秒)，其默认值也是0。这个属性和transition-delayy使用方法是一样的。
五、animation-iteration-count
&&animation-iteration-count:infinite&|&&number&&[,&infinite&|&&number&]*
&取值说明：
animation-iteration-count是用来指定元素播放动画的循环次数，其可以取值&number&为数字，其默认值为&1&；infinite为无限次数循环。
六、animation-direction
&&animation-direction:&normal&|&alternate&[,&normal&|&alternate]*
取值说明：
animation-direction是用来指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
七、animation-play-state
&&&animation-play-state:running&|&paused&[,&running&|&paused]*
&取值说明：
animation-play-state主要是用来控制元素动画的 播放状态。其主要有两个值，running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样，可以通过paused将 正在播放的动画停下了，也可以通过running将暂停的动画重新播放，我们这里的重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播 放。另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。这个属性目前很少内核支持，所以只是稍微提一下。
上面我们分别介绍了animation中的各个属性的语法和取值，那么我们综合上面的内容可以给animation属性一个速记法：
&&animation:[&animation-name&&||&&animation-duration&&||&&animation-timing-function&&||&&animation-delay&&||&&animation-iteration-count&&||&&animation-direction&]&[,&[&animation-name&&||&&animation-duration&&||&&animation-timing-function&&||&&animation-delay&&||&&animation-iteration-count&&||&&animation-direction&]&]*
&如下图所示
相信大家看完语法后，应该对于上面的例子很清楚了吧。不过话说回来动画是可以做了，但兼容它的浏览器不多啊，目前只有苹果，谷歌，火狐支持。
本站欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
转载请注明： 文章转载自：爱思资源网
[ 你可能感兴趣的文章 ]
[ 扫一扫，在手机上阅读 ]
[前端插件推荐] Plugin
jQuery垂直滚动插件 - vTicker
爱思资源网 Copyright
All rights reserved.(晋ICP备号-1)css样式怎么调用_百度知道
css样式怎么调用
不好意思我说的是js怎么调用样式，
123&lt.css&123&&#47.div{ font-text/}&如果是调用class的话;这样就可以达到引用的目的了;stylesheet&quot，可以这么写;&div&gt，可以这么写#div{ font-&#47您好:12div&css&div id=&div& rel=&quot：&div&&css/link href=& type=&quot:12&}&div class=&style，希望对您有帮助;在页面里调用链接样式表; &#47！如果是调用id的话
其他类似问题
为您推荐：
其他2条回答
value = obj：
obj.怎样改变样式;
非IE2.怎样改变class：31 怎样获取样式.style[attr] = value.currentStyle[attr].className =
value = getComputedStyle(obj,false)[attr]
1.&script type=&text/javascript& src=&/bill/js/jquery-1.7.2.min.js&&&/script&2.还有一种是在页面直接编写
css样式的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁thinkphp 引用css
使用import 方法引用CSS 1 &!DOCTYPE html& 2 &html xmlns=&http://www.w3.org/1/xhtml&& 3 &head& 4 &meta http-equiv=&Content-Type& content=&text/ht ...
引用CSS文件到Html方法-css引入,css引用 使用不同的方法来引用css样式表,最终到达的效果相同,但是使用不同方法应用的css文件将影响到SEO及网页打开速度效率. html引用css方法如下 1.直接在div中使用css样式制作div+css网页 2.html中使用style自带式
4.使用link引用外部CSS文件 推 ...
本文出自:http://gaolizhong666./blog/static//&link&元素所参考的样式用户可以自由的选择加以改变,而导入的样式表单就自动的与剩下的样式表融合在一起了CSS与HTML文档结合的4中方法:1 使用&link&元素链接到外部的样式文件2 在&h ...
link元素HTML和XHTML都有一个结构,它使网页作者可以增加于HTML文档相关的额外信息.这些额外资源可以是样式化信息(CSS).导航助手.属于另 外形式的信息(RSS).联系信息等等.@import指定导入的外部样式表及目标设备类型.其实l,link是一个html的一个标签,,link除了调用c ...
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1:
直接在标签内用 style 引用,如: &div class=&pmc& style=&border:1px solid #440000;padding=0margin:40& ...
link元素HTML和XHTML都有一个结构,它使网页作者可以增加于HTML文档相关的额外信息.这些额外资源可以是样式化信息(CSS).导航助手.属于另 外形式的信息(RSS).联系信息等等.@import指定导入的外部样式表及目标设备类型.其实l,link是一个html的一个标签,,link除了调 ...
如何在网页中引用CSS? 1 2 如何在网页中引用CSS?
初学CSS的网友一般都对如何在网页中使用css感到特别困惑,在这里我把常用的方法介绍给大家,以解大家心头之惑:) (1)使用Embed(嵌入样式单)排版样式:
即将CSS代码直接插入每个页面的HTML的&head&区,就象前几节看到的.使用&style&gt ...
前两天把内置的css改成引用外部css文件,结果网页顶部莫名其妙的出现了一行间隙,css文件内容样例如下: &style type=&text/css&& html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img
margin: 0;
CSS技巧1.div的垂直居中问题vertical-align: 将行距增加到和整个DIV一样高 line-height:200 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 2. margin加倍的问题
设置为float的div在ie下设置的margin会加倍.这是一个ie6都存在的bug.解决方案是在这个div里面加上display:i ...
如果JS代码中设置&p&元素的另一个CSS属性font-family.这个属性的获取方式与color属性略有不同,因为 font和family之间的连字符与JS中减法操作符相同,JS会把它解释为减号.如果你像下边这样访问名为 font-family 的属性,会收到一条出错信息:
Element.style.font-family
JS将减 ...
以下是引用片段:function loadjscssfile(filename, filetype){ if (filetype==&js&){ //判断文件类型
var fileref=document.createElement('script')//创建标签
fileref.setAttribute(&type&,& ...
如何使用样式 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化.有以下三种方式来插入样式表: 1.外部样式表 当样式需要被应用到很多页面的时候,外部样式表将是理想的选择.使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观. &head&&link rel=&stylesheet& type=&tex ...
RT,路由加载出不同的页面,那怎么样加载这些页面对应的css呢 比如 .state('active',{ url : '/active', templateUrl : 'tpls/active.html' }) 这个应该怎么加载对应的css啊?有人推荐我把css混合在一个文件中一开始就加载,但是这样岂不是耦合度太高了,而且一个文件里面容易起冲突啊,很容易被其它属性影响,要是 ...
1.class选择器 &html& &head& &title&class选择器&/title& &style type=&text/css&& &!-- .one{
/* 红色 */
/* 文字大小 */ }
(一)刚开始腾讯搞下来CSS+DIV布局
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&html xmlns=&qu ...
一般在如下情况下使用:
Test001.jsp &div id=&contents&&
&h1 class=&ico001 icoCom&&title 001&/h1& &/div& 使用两种样式时,中间用空格隔开即可
Test002.jsp &div id=&qu ...
修改了css 样式文件后,重新浏览该jsp页面,发现新修改的样式没有生效.总以为是项目缓存所引起的,于是清理所有项目,重新构建项目.不行.执行server 的 publish 还是不行.用window 的搜索功能发现除了 WebContent 目录有该 css 文件外,.metadata/.plugins/org.eclipse.wst.server.core/tmp1/w ...
Lib\ORG\Util\Image.class.php
Public function verify(){
import('@.ORG.Util.Image'); if (class_exists('Image')) { echo &found&; } else { echo &没有找到&; }
CSS引用外部样式表的优点:一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件,所以外部引用相对于内部引用和内联引用来说是是节省资源的. CSS使用内部样式表.内联样式表的优点:可以直观的看到CSS代码,可以方便的修改并观察更改后的效果. 一:引用外部样式表方式一,使用link标签引用CSS &head& &link rel=&sty ...
最近讲课中,有些学员对调用样式表老是有含糊不清?大体说来有四种方式: 1.外部文件引用方式;(推荐使用) ; 3.内部文档头方式也叫内嵌法调用; 4.直接插入式也叫行内样式. 它们主要的差别在于它们规定的风格使用的范围不同: 一.外部文件引用方式 外部文件引用方式即将CSS写成一个文件,在HTML文档头通过文件引用来进行风 格控制.也 ...IBM Bluemix
点击按钮，开始云上的开发！
developerWorks 社区
了解如何使用 LESS 为现代网站编写可读、可维护的级联样式表 (CSS)。CSS 使过去的表和不可见图像的布局成为朦胧的记忆。但 CSS 仍然不够友好，我们采取了若干方法，尝试让开发人员控制。其中最好的方法之一就是 LESS，它使用变量、mixins、运算符和函数等动态行为扩展了 CSS。LESS 是一种类似 CSS 的语言，可在客户端或通过服务器端预处理无缝地编译到 CSS 中。
, 合伙人, Zepheira, LLC
Uche Ogbuji 是
的合伙人，这家公司专门提供下一代 Web 技术解决方案。Ogbuji 是
的首席开发人员，这是一种用于 XML、RDF 和知识管理应用程序的开放源码平台；也是 （用于 Web 团队开发的敏捷方法）和
RDF 查询语言的首席开发人员。他是一位出生在尼日利亚的计算机工程师和技术作家，目前定居在科罗拉多的博尔德。可以通过他的博客
进一步了解 Ogbuji 先生。
CSS 彻底改变了 Web 页面的设计，但 CSS 仍然是静态的，而且在其句法发展方面受到限制。这些限制是有目的且合乎情理的，鼓励广泛加以实现。但开发人员和设计人员常常发现 CSS 使用起来很单调乏味。许多 Web 框架包含一些工具，这些工具使得人们更容易使用更灵活的特性创作 CSS，然后将结果编译成静态 CSS，以便部署到站点。最近的一些项目更侧重于创建旨在编译到 CSS 中的语言。Alexis Sellier 的开源项目 LESS 是这类语言中最受欢迎的一种语言。LESS 在现有 CSS 语法之上添加了一些开发人员熟悉的特性，比如变量、mixins、运算符和函数。可以使浏览器中的 JavaScript 或通过服务器端 JavaScript 工具集的预处理将 LESS 编译到 CSS 中。LESS 在其他各种工具集中也得到了广泛应用，包括 JavaScript 的流行 Bootstrap 项目。在本文中，我要介绍的是 LESS（尤其是 1.4 版本），LESS 是为现代网站编写可读性的、可维护的 CSS 的一种方式。参见 部分，获取本文的示例代码。入门下载最新版 LESS（撰写本文之时是 1.4；参见 ）。然后准备学习其语言。万维网联盟 (W3C) 在其维基中提供了一些用于学习 CSS 的资料。我基本上遵循该教程的顺序，因此，如有需要的话，您可以一前一后学习基本的 CSS 和 LESS。清单 1 再现了 W3C 教程的第一个示例：清单 1. 基本 CSS 示例 (listing1.css) p {
font-size: 12
background-color:
}清单 2 中的 HTML 将
中的 CSS 投入使用：清单 2. 引用清单 1 的基本 CSS 示例的 HTML (listing2.html) &head&
&link rel="stylesheet" type="text/css" href="listing1.css"&
&p&This is a paragraph&/p&
&/body&图 1 显示了 Mac OS X 上 Safari 浏览器中显示的 listing2.html：图 1. 使用清单 1 中的 CSS 的浏览器输出删除魔法值看到
的开发人员很可能立刻注意到那些违反开发者本能的内容，即硬编码到 CSS 中的值，这些值有时被揶揄为 “魔法值 (magic value)”。LESS 中最重要的特性之一是变量。清单 3 是使用变量的一个 LESS 基本示例版本：清单 3. 使用 LESS 中的变量的基本 CSS 示例 (listing3.css) @main-text-color:
@main-text-size: 12
@main-text-bg:
color: @main-text-
font-size: @main-text-
background-color: @main-text-
} 不是语法正确的 CSS，因此您不能在 HTML 中将 listing1.css 替换为 listing3.less 。您还必须更新主机 HTML 来调用 JavaScript 编译器，如清单 4 所示：清单 4. 引用基本 CSS 示例 LESS 版本的 HTML (listing4.html) &head&
&link rel="stylesheet/less" type="text/css" href="listing3.less"&
&p&This is a paragraph&/p&
&script src="less.js" type="text/javascript"&&/script&
&/body&请注意，在
中，我将 script 标记放在页面 body 的结尾处。传统上，大多数开发人员将 script 标记放在 head 中。但将它们放在 body 中是合法的，这利用了这样一个事实（引用自 HTML 4 规范），即 “script 元素按照加载文档的顺序进行求值”。如今许多站点在临近结束时都有一些脚本，因此主要内容的加载不会因为任何脚本处理而延迟。服务器端编译到目前为止，我已经向您展示：开发和部署 LESS 便于快速使用浏览器，但却是有代价的。每次页面加载时，编译用的 JavaScript 都运行于用户的浏览器之上，这耗尽了计算资源并减缓了页面加载。如果在浏览器中加载
，并检查 JavaScript 控制台，则会看到一条消息：“less: css generated in 36ms”。36 毫秒的时间并不算长，但它代表着额外的不必要计算和时间。快速页面加载在 Web 上很重要。在转入生产模式之后，使用一个服务器端 JavaScript 工具将 LESS 编译到 CSS 中。Node.js 是一个流行选项，被记录在 LESS 站点上。我喜欢使用 Mozilla 的独立 JavaScript 项目 Rhino。要使用 Rhino 和 LESS，请下载并安装 Rhino（参见 ）。将 js.jar 放在一个方便进行构建的位置。您需要一个特殊版本的 less.js，该版本可在 GitHub 完整下载的 LESS 中下载中找到（参见 ）。本文中使用的版本是 less.js-master/dist/less-rhino-1.4.0.js。将 less-rhino-1.4.0.js 放在保存 Rhino JAR 的地方。下面准备将 LESS 代码编译到 CSS 中。要编译 listing3.less，请切换到 listing3.less 所在的目录并执行以下命令： java -jar js.jar less-rhino-1.4.0.js listing3.less & listing3.css编译操作会将生成的 CSS 放在 listing3.css 文件中。该文件的内容如下： p {
color: #ff0000;
font-size: 12
background-color: #008000;
}在 listing3.css 中，LESS 变量被替换，颜色名称被替换为 RGB 形式（比如 red 被替换为 #ff0000 ）。现在您可以按照常用方法将 listing3.css 部署到一台服务器中。LESS 替代注释语法LESS 的一个小小的增强是，编写单行注释的方式变得简单了。清单 5 显示了来自 W3C CSS 教程的一个标准注释示例：清单 5. 使用注释的 CSS 示例 (listing 5.css) p {
/* This is a comment */
font-size: 12
}清单 6 中的 LESS 代码等同于
：清单 6. 与使用简化注释的清单 5 等同的 LESS 代码 (listing6.less) p {
// This is a comment
font-size: 12
} 使用的语法对于程序员来说很常见，而且键入起来稍微容易一些。但鉴于处理 LESS 的方式，这种注释并不出现在生成的 CSS 中。如果您想为浏览器查看器保留注释（例如用于版权声明），则必须使用标准的 CSS 注释语法。W3C 教程其余内容专注于 CSS 选择器语法和常见属性的细节。此时，我要将重心转向 LESS 的更广泛使用，这是大多数 Web 开发人员在实践过程中越来越多遇见的情形。创建响应式设计在 2010 年，许多 Web 设计人员开始倡导一种称为 响应式设计 的页面设计方法。从一开始，就需要构建灵活的 Web 页面，在从小型手机到比常用台式机更大的显示设备中查看它们。响应式设计的核心是 CSS3 媒体查询，该查询是一种根据用户显示器的性质（特别是尺寸）来调用 CSS 规则的标准方式。LESS 使我们能够更容易地展现使用媒体查询来实现响应式设计的 CSS。出于演示之目的，我将 developerWorks 博主 Bob Leah 的优秀响应式设计
的一个 LESS 版本组合起来。在文章的代码包（参见 ）中，它是 responsive.less。运算符responsive.less 中的一项关键技术是使用变量设置基本的方框大小，然后根据可视区的大小调整方框。我使用 LESS 运算符来进行缩放。例如，清单 7 中的代码段使用乘法运算符来缩放横幅图像：清单 7. LESS 中乘法的使用 #banner img {
max-width: (@bannerwidth * @scale);
max-height: (@mainheight * @scale);
中，@bannerwidth 和 @mainheight 是根据 @scale 因子缩减的默认值。最新的 LESS 版本要求您将包含运算符的所有表达式放在圆括号中，以避免语法混淆。嵌套规则LESS 最有用的功能之一是嵌套 CSS 规则。嵌套规则有助于您以简单易懂的方式组织代码。在清单 8（responsive.less 中的一段经过修改的摘录片段）中，我在媒体查询内嵌套了通用的 CSS 规则：清单 8. LESS 中嵌套规则的使用 @media (min-width: 401px) and (max-width: 800px) {
@scale: 0.75
#banner { width: (@bannerwidth * @scale); }
#banner img {
max-width: (@bannerwidth * @scale);
max-height: (@mainheight * @scale);
#main { width: (@mainwidth * @scale - @extrabuffer); }
#main-content {
width: (@maincontentwidth * @scale * 0.75 - @extrabuffer);
} 中的嵌套规则等同于清单 9 中多个独立的 CSS 规则：清单 9. 等同于清单 8，但无嵌套规则 @scale: 0.75
@media (min-width: 401px) and (max-width: 800px) and #banner {
width: (@bannerwidth * @scale);
@media (min-width: 401px) and (max-width: 800px) and #banner img {
max-width: (@bannerwidth * @scale);
max-height: (@mainheight * @scale);
@media (min-width: 401px) and (max-width: 800px) and #main {
width: (@mainwidth * @scale - @extrabuffer);
@media (min-width: 401px) and (max-width: 800px) and #main-content {
width: (@maincontentwidth * @scale * 0.75 - @extrabuffer);
} 中的版本没有提供这些密切相关规则的自然分组，而且还因为反复指定媒体查询而违反了 DRY（不要重复自己）原则。mixinsLESS 减少重复的另一种方式是让您指定可添加到其他规则中的一组规则。在 responsive.less 中，我使用了此 mixin 技术来跨两个不同的媒体查询表达常见规则，如清单 10 所示：清单 10. LESS 中 mixins 的使用 .media-body (@scale: 0.75) {
#banner { width: (@bannerwidth * @scale); }
#banner img {
max-width: (@bannerwidth * @scale);
max-height: (@mainheight * @scale);
#main { width: (@mainwidth * @scale - @extrabuffer); }
#main-content {
width: (@maincontentwidth * @scale * 0.75 - @extrabuffer);
#widget-container {
width: (@widgetoutwidth * @scale * 0.75 - @extrabuffer);
.widget-content {
width: (@widgetinwidth * @scale * 0.75 - @extrabuffer);
//Rules for viewing from 401px to 800px
@media (min-width: 401px) and (max-width: 800px) {
//Rules for viewing smaller than 400px
@media (max-width: 400px)
.media-body(0.3);
//Extra manipulation of some rules
#main-content { padding: 0 }
#widget-container { width: padding: 0 }
.widget-content { margin: 5 }
.widget-text { display: }
}Mixins 可以接受参数，比如
中方框大小的比例因子。默认的比例因子是 0.75 。 在可视区中使用从 401px 到 800px 的默认大小。为了在小于 400px 的尺寸下进行查看，比例因子被更改为 0.3 ，并且在该区域添加了一些额外规则。图 2 显示了 responsive.html 的浏览器显示，它使用了 responsive.less。我减小了浏览器的宽度，以满足小于 400px 的宽度的媒体查询，这样一来您就可以看到页面在小型移动设备上是什么样子。图 2. responsive.html 的低宽度浏览器输出在我 Mac 上的 Safari 中，当浏览器宽度接近 500px 时，小于 400px 的宽度的媒体查询被触发。该行为引出了一个重要观点。媒体查询基于视区 这一概念。视区是可视浏览器空间的数量，用 CSS 像素进行定义，并通过设备和浏览器进行确定。CSS 像素不同于设备像素；例如，如果用户缩放浏览器视图，那么像素模型之间的关系就会发生变化（参见 ）。此外，设备和浏览器设置的视区大小不同于实际显示的窗口大小。在
中就是如此：窗口大约是 500px，但 CSS 将其作为 400px 宽的视区加以处理。这一现象强调了这样一个事实：与所有 Web 开发技术一样，响应式设计需要完善的跨设备测试。结束语我是一名软件架构师兼开发人员，但绝不是一名 Web 设计人员。凭借 LESS，我可以利用我的编程技能快速开发更便于理解和维护的 CSS。变量和 mixins 使我能够快速做出调整，查看其效果，无需在整个 CSS 文件内四处移动，查找我需要进行相关更改的内容。响应式设计是经济适用的可管理移动 Web 设计中的一项公认的关键技术。它在针对打印等可访问性和其他演示模式的设计中也很有用。由于为应对媒体查询而应用的多种样式处理起来很繁琐，所以 LESS 简化和组织 CSS 代码的功能愈发有价值。
下载描述名字大小本文的 LESS、CSS 和 HTML 代码120KB
参考资料 ：在项目官方网站了解有关 LESS 的更多内容。：从这个简明教程中了解 CSS 基础知识。“”（Daniel J. Lewis，developerWorks，2011 年 5 月）：了解标准化 CSS 样式技术，包括 CSS 2.1 和跨浏览器 CSS3。“”（Jeff Ball，developerWorks，2012 年 10 月）：了解如何为桌面网站、移动手机和平板电脑使用 CSS 媒体查询。“”：这一 QuirksMode 文章系列解释设备像素与 CSS 像素之间的关系。“”（Ethan Marcotte，A List Apart，2010 年 5 月）：了解有关响应式设计的更多内容。：查阅适合于本文的响应式设计代码示例。“”（Alex Starostin，developerWorks，2013 年 5 月）：本文详述了 Sass，LESS 的一个替代方案。（Uche Ogbuji，developerWorks，2000 年 11 月至今）：阅读有关级联样式表、XML、Python、XSLT、XHTML 和其他开源和 Web 技术的文章。：查找涵盖各种基于 Web 的解决方案的文章。随时关注 ，了解各种 IBM 产品和 IT 行业主题。。观看 ，那里提供了面向初学者的产品安装和设置演示，以及面向经验丰富的开发人员的高级功能演示。LESS：在 获取 或其他版本。Mac 用户可能发现 很有用。：获取面向命令行 JavaScript 的 Rhino 工具集。以最适合您的方式 ：下载产品试用版，在线试用产品，或在云环境下使用产品。加入 。探索由开发人员推动的博客、论坛、组和维基，并与其他 developerWorks 用户进行交流。
developerWorks: 登录
标有星（*）号的字段是必填字段。
保持登录。
单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件。
在您首次登录 developerWorks 时，会为您创建一份个人概要。您的个人概要中的信息（您的姓名、国家/地区，以及公司名称）是公开显示的，而且会随着您发布的任何内容一起显示，除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。
所有提交的信息确保安全。
选择您的昵称
当您初次登录到 developerWorks 时，将会为您创建一份概要信息，您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。昵称长度在 3 至 31 个字符之间。
您的昵称在 developerWorks 社区中必须是唯一的，并且出于隐私保护的原因，不能是您的电子邮件地址。
标有星（*）号的字段是必填字段。
(昵称长度在 3 至 31 个字符之间)
单击提交则表示您同意developerWorks 的条款和条件。 .
所有提交的信息确保安全。
文章、教程、演示，帮助您构建、部署和管理云应用。
立即加入来自 IBM 的专业 IT 社交网络。
为灾难恢复构建应用，赢取现金大奖。
static.content.url=/developerworks/js/artrating/SITE_ID=10Zone=Web development, Open sourceArticleID=939961ArticleTitle=在 CSS 中使用 LESS 实现更多功能publish-date=