>

兑现越多效果与利益

- 编辑:至尊游戏网站 -

兑现越多效果与利益

在 CSS 中使用 LESS 实现更多功能

2013/08/18 · CSS · CSS

原文出处: IBM developerworks   

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 的一种方式。参见 下载部分,获取本文的示例代码。

动画兼容

Firefox: -moz-
Safari: -webkit-
Opera: -o-
IE: -ms-

-webkit-transform: translateY(-50%) rotate(-40deg);
-moz-transform: translateY(-50%) rotate(-40deg);
-ms-transform: translateY(-50%) rotate(-40deg);
-o-transform: translateY(-50%) rotate(-40deg);
transform: translateY(-50%) rotate(-40deg);

代码举例:
.page_home .i1{
background: url('../imgs/page_home_identify.png') no-repeat;
background-size: cover;
-moz-animation: Up 1s ease forwards;
-webkit-animation: Up 1s ease forwards;
-ms-animation: Up 1s ease forwards;
-o-animation: Up 1s ease forwards;
animation: Up 1s ease forwards;
}

@-webkit-keyframes Up{
from{
    transform: translateY(0rem);
    opacity: 0;
}
to{
    transform: translateY(1.9rem);
    opacity: 1;
}
 }
@-moz-keyframes Up{
from{
    transform: translateY(0rem);
    opacity: 0;
}
to{
    transform: translateY(1.9rem);
    opacity: 1;
}
}
@keyframes Up{
from{
    transform: translateY(0rem);
    opacity: 0;
}
to{
    transform: translateY(1.9rem);
    opacity: 1;
}
}

入门

下载最新版 LESS(撰写本文之时是 1.4;参见 参考资料)。然后准备学习其语言。万维网联盟 (W3C) 在其维基中提供了一些用于学习 CSS 的资料。我基本上遵循该教程的顺序,因此,如有需要的话,您可以一前一后学习基本的 CSS 和 LESS。

清单 1 再现了 W3C 教程的第一个示例:

清单 1. 基本 CSS 示例 (listing1.css)

CSS

p { color: red; font-size: 12px; background-color: green; }

1
2
3
4
5
p {
  color: red;
  font-size: 12px;
  background-color: green;
}

清单 2 中的 HTML 将 清单 1 中的 CSS 投入使用:

清单 2. 引用清单 1 的基本 CSS 示例的 HTML (listing2.html)

CSS

<head> <link rel="stylesheet" type="text/css" href="listing1.css"> </head> <body> <p>This is a paragraph</p> </body>

1
2
3
4
5
6
<head>
    <link rel="stylesheet" type="text/css" href="listing1.css">
</head>
<body>
    <p>This is a paragraph</p>
</body>

图 1 显示了 Mac OS X 上 Safari 浏览器中显示的 listing2.html:

图 1. 使用清单 1 中的 CSS 的浏览器输出

图片 1

使IE6,7,8支持h5常用新标签以及部分常用CSS3渲染

引入PIE.js文件使IE6,7,8支持部分常用CSS3渲染
官网http://css3pie.com 名称:PIE.js
此JS可使IE6,7,8支持CSS3的部分渲染
例如:border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image
使用办法:
此API使用非常简单,只需要在页面头部引用
JavaScript Code复制内容到剪贴板

以下是jQuery的调用办法,把你需要渲染的样式名写上即可
JavaScript Code复制内容到剪贴板
$(function() {
$('.rounded').each(function() {
PIE.attach(this);
});
});

同样,如果要删除某个样式的CSS3效果

删除魔法值

看到 清单 1 的开发人员很可能立刻注意到那些违反开发者本能的内容,即硬编码到 CSS 中的值,这些值有时被揶揄为 “魔法值 (magic value)”。LESS 中最重要的特性之一是变量。清单 3 是使用变量的一个 LESS 基本示例版本:

清单 3. 使用 LESS 中的变量的基本 CSS 示例 (listing3.css)

CSS

@main-text-color: red; @main-text-size: 12px; @main-text-bg: green; p { color: @main-text-color; font-size: @main-text-size; background-color: @main-text-bg; }

1
2
3
4
5
6
7
8
9
@main-text-color: red;
@main-text-size: 12px;
@main-text-bg: green;
 
p {
  color: @main-text-color;
  font-size: @main-text-size;
  background-color: @main-text-bg;
}

清单 3 不是语法正确的 CSS,因此您不能在 HTML 中将 listing1.css替换为 listing3.less。您还必须更新主机 HTML 来调用 JavaScript 编译器,如清单 4 所示:

清单 4. 引用基本 CSS 示例 LESS 版本的 HTML (listing4.html)

CSS

<head> <link rel="stylesheet/less" type="text/css" href="listing3.less"> </head> <body> <p>This is a paragraph</p> <script src="less.js" type="text/javascript"></script> </body>

1
2
3
4
5
6
7
<head>
    <link rel="stylesheet/less" type="text/css" href="listing3.less">
</head>
<body>
    <p>This is a paragraph</p>
    <script src="less.js" type="text/javascript"></script>
</body>

请注意,在 清单 4 中,我将 script标记放在页面 body的结尾处。传统上,大多数开发人员将 script标记放在 head中。但将它们放在 body中是合法的,这利用了这样一个事实(引用自 HTML 4 规范),即 “script元素按照加载文档的顺序进行求值”。如今许多站点在临近结束时都有一些脚本,因此主要内容的加载不会因为任何脚本处理而延迟。

响应式兼容

服务器端编译

到目前为止,我已经向您展示:开发和部署 LESS 便于快速使用浏览器,但却是有代价的。每次页面加载时,编译用的 JavaScript 都运行于用户的浏览器之上,这耗尽了计算资源并减缓了页面加载。如果在浏览器中加载 清单 4 ,并检查 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 所在的目录并执行以下命令:

CSS

java -jar js.jar less-rhino-1.4.0.js listing3.less > listing3.css

1
java -jar js.jar less-rhino-1.4.0.js listing3.less > listing3.css

编译操作会将生成的 CSS 放在 listing3.css 文件中。该文件的内容如下:

CSS

p { color: #ff0000; font-size: 12px; background-color: #008000; }

1
2
3
4
5
p {
  color: #ff0000;
  font-size: 12px;
  background-color: #008000;
}

在 listing3.css 中,LESS 变量被替换,颜色名称被替换为 RGB 形式(比如 red被替换为 #ff0000)。现在您可以按照常用方法将 listing3.css 部署到一台服务器中。

使用 CSS 媒体查询创建响应式网站

LESS 替代注释语法

LESS 的一个小小的增强是,编写单行注释的方式变得简单了。清单 5 显示了来自 W3C CSS 教程的一个标准注释示例:

清单 5. 使用注释的 CSS 示例 (listing 5.css)

JavaScript

p { color: red; /* This is a comment */ font-size: 12px; }

1
2
3
4
5
p {
  color: red;
  /* This is a comment */
  font-size: 12px;
}

清单 6 中的 LESS 代码等同于 清单 5 :

清单 6. 与使用简化注释的清单 5 等同的 LESS 代码 (listing6.less)

CSS

p { color: red; // This is a comment font-size: 12px; }

1
2
3
4
5
p {
  color: red;
  // This is a comment
  font-size: 12px;
}

清单 6 使用的语法对于程序员来说很常见,而且键入起来稍微容易一些。但鉴于处理 LESS 的方式,这种注释并不出现在生成的 CSS 中。如果您想为浏览器查看器保留注释(例如用于版权声明),则必须使用标准的 CSS 注释语法。

W3C 教程其余内容专注于 CSS 选择器语法和常见属性的细节。此时,我要将重心转向 LESS 的更广泛使用,这是大多数 Web 开发人员在实践过程中越来越多遇见的情形。

(适用于所有屏幕大小的设计 手机端)

先决条件
本文中的代码样例被设计为可运行于支持 CSS 媒体查询的网页浏览器中,这些浏览器包括 Mozilla Firefox、Apple Safari、Google Chrome 和 Opera。请参阅 参考资料,获取展示了桌面和移动浏览器中的 CSS3 媒体查询的浏览器兼容性支持的完整列表。

媒体查询
从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型。清单 1 展示了一个示例。
清单 1. 使用媒体类型

<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

在清单 1 中,media
属性定义了应该用于指定每种媒体类型的样式表:
screen
适用于计算机彩色屏幕。
print
适用于打印预览模式下查看的内容或者打印机打印的内容。

作为 CSS v3 规范的一部分,可以扩展媒体类型函数,并允许在样式表中使用更精确的显示规则。媒体查询 是评估 True 或 False 的一种表达。如果为 True,则继续使用样式表。如果为 False,则不能使用样式表。这种简单逻辑通过表达式变得更加强大,使您能够更灵活地对特定的设计场景使用自定义的显示规则。
媒体查询包含一个媒体类型,后跟一个或多个检查特定条件(如最小的屏幕宽度)的表达式。样式表中的媒体查询看起来如清单 2 中的示例所示。
清单 2. 媒体查询规则

@media all and (min-width: 800px) { ... }

根据清单 2 中的标记,所有最小水平屏幕宽度为 800 像素的屏幕(屏幕和打印等)都应使用如下 CSS 规则。该规则在示例中省略号所在的地方。对于该媒体查询:

@media all
是媒体类型,也就是说,将此 CSS 应用于所有媒体类型。
(min-width:800px)
是包含媒体查询的表达式,如果浏览器的最小宽度为 800 像素,则会告诉浏览器只运用下列 CSS。

请注意,在清单 2 中,可以省略关键词 all 和 and。

在将某个媒体查询应用于所有媒体类型时,会省略 all。后面的 and也是可选的。使用简写语法重新编写媒体查询,如清单 3 所示。
清单 3. 简写语法

@media (min-width:800px) { ... }

媒体查询也可以包含复杂表达式。例如,如果您想要创建一个仅在最小宽度为 800 像素且最大宽度为 1200 像素时应用的样式,则需要按照清单 4 中的规则来做。
清单 4. 复杂表达式

@media (min-width:800px) and (max-width:1200px) { ... }

在您的表达式中,您可以根据自己的喜好使用任意数量的 and
条件。如果您想要增加其他条件来检查特定的屏幕方向,只需添加另一个 and
关键词,后跟 orientation
媒体查询,如清单 5 所示。
清单 5. and条件

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

清单 5 中的媒体查询仅在宽度为 800 到 1200 像素且方向是纵向时才能激活。(通常,方向仅对能够轻易转换纵横模式的智能手机和平板电脑上是有意义的。)如果其中一个条件为 False,则无法应用媒体查询规则。
and
关键词的反义词是 or
关键词。和 and一样,这些条件组合在一起会构成复杂表达式。如果其中有一个条件为 True,那么整个表达式或分离的两个条件都会为 True,如清单 6 所示。
清单 6. or
关键词

@media (min-width:800px) or (orientation:portrait) { ... }

如果宽度至少是 800 像素或方向是纵向的,则会应用该规则。
另一个保存在词库中的媒体查询关键词是 not
。位于媒体查询的开始处,not
会忽略结果。换句话说,如果该查询本来在没有 not
关键词的情况下为 true,那么现在它将为 false。清单 7 展示一个示例。
清单 7. 使用 not

@media (not min-width:800px) { ... }

仅从英文意思上理解,清单 7 中代码的表示:当最小宽度不是 800 像素时,会应用下列 CSS 规则。这些示例只是将像素作为媒体查询中的测量单位,但是测量单位并不仅限于像素。您可以使用任何有效的 CSS 测量单位,比如厘米 (cm)、英寸 (in)、毫米 (mm) 等。

创建响应式设计

在 2010 年,许多 Web 设计人员开始倡导一种称为 响应式设计 的页面设计方法。从一开始,就需要构建灵活的 Web 页面,在从小型手机到比常用台式机更大的显示设备中查看它们。

响应式设计的核心是 CSS3 媒体查询,该查询是一种根据用户显示器的性质(特别是尺寸)来调用 CSS 规则的标准方式。LESS 使我们能够更容易地展现使用媒体查询来实现响应式设计的 CSS。出于演示之目的,我将 developerWorks 博主 Bob Leah 的优秀响应式设计 示例 的一个 LESS 版本组合起来。在文章的代码包(参见 下载)中,它是 responsive.less。

有用的媒体特性

媒体很多特性,比如宽度、颜色和网格,您可以在媒体查询中使用它们。对每个可能的媒体特性进行描述不在本文讨论范围内。关于媒体查询的文档 The World Wide Web Consortium's (W3C) 提供了这方面的一个完整清单。(请参阅 参考资料)。
要设计响应式网站,只需要了解一些媒体特性:方向、宽度和高度。作为一个简单媒体特性,方向的值可以是 portrait或 landscape。这些值适用于持有手机或平板电脑的用户,使您可以根据两个形状因素来优化内容。当高度大于长度时,则认为屏幕是纵向模式,当宽度大于高度时,则认为屏幕是横向模式。清单 8 显示了一个使用 orientation
媒体模式查询的示例。
清单 8. orientation媒体查询

@media (orientation:portrait) { ... }

高度和宽度行为十分相似,都支持以 min- 和 max-为前缀。
清单 9 展示了一个有效的媒体查询。
清单 9. 高度和宽度媒体查询

@media (min-width:800px) and (min-height:400px) { ... }

如果没有 min-或 max-前缀,您还可以使用 width 和 height 媒体特性,如清单 10 所示。
清单 10. 不带 min-和 max-前缀

@media (width:800px) and (height:400px) { ... }

当屏幕正好是 800 像素宽、400 像素高时,可以使用清单 10 中的媒体查询。现实中,像这样的媒体查询可能过于具体而不太有用。检测精确维度是大多数网站访问者都不可能遇到的一个场景。通常情况下,响应式设计会使用范围来执行屏幕检测。
作为媒体查询大小范围的后续内容,下一节将讨论一些常见的媒体查询,在设计一个响应式网站时,您可能会发现它们非常有用。

运算符

responsive.less 中的一项关键技术是使用变量设置基本的方框大小,然后根据可视区的大小调整方框。我使用 LESS 运算符来进行缩放。例如,清单 7 中的代码段使用乘法运算符来缩放横幅图像:

清单 7. LESS 中乘法的使用

CSS

#banner img { max-width: (@bannerwidth * @scale); max-height: (@mainheight * @scale); }

1
2
3
4
#banner img {
  max-width: (@bannerwidth * @scale);
  max-height: (@mainheight * @scale);
}

在 清单 7 中,@bannerwidth和 @mainheight是根据 @scale因子缩减的默认值。最新的 LESS 版本要求您将包含运算符的所有表达式放在圆括号中,以避免语法混淆。

常见媒体查询

因为 Apple 首次向市场推出了用户智能手机和平板电脑产品,所以下列大多数媒体查询都是基于这些型号的设备。

如果目标是横向模式智能手机,则使用: @media (min-width: 321px) { ... }

如果目标是纵向模式智能手机,则使用: @media (max-width: 320px) { ... }

如果目标是横向模式 Apple iPad,则使用: @media (orientation: landscape) { ... }

如果目标是纵向模式 iPad,则使用: @media (orientation: portrait) { ... }

您可能已经注意到了,iPad 上使用的是 orientation媒体特性,而 width
用于 Apple iPhone 之上。主要是因为 iPhone 不支持orientation媒体特性。您必须使用 width模拟这些方向断点。请参阅 参考资料,获取有关常见媒体特性的更多信息。

嵌套规则

LESS 最有用的功能之一是嵌套 CSS 规则。嵌套规则有助于您以简单易懂的方式组织代码。在清单 8(responsive.less 中的一段经过修改的摘录片段)中,我在媒体查询内嵌套了通用的 CSS 规则:

清单 8. LESS 中嵌套规则的使用

CSS

@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); float: left; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
@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);
    float: left;
  }
}

清单 8 中的嵌套规则等同于清单 9 中多个独立的 CSS 规则:

清单 9. 等同于清单 8,但无嵌套规则

JavaScript

@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); float: left; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@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);
    float: left;
}

清单 9 中的版本没有提供这些密切相关规则的自然分组,而且还因为反复指定媒体查询而违反了 DRY(不要重复自己)原则。

SASS 中的媒体查询

Ruby on Rails 中的内置支持有助于推进 Syntactically Awesome Style Sheets (SASS) 的盛行,使其在 Web 开发社区中迅速走强。关于 SASS 的详细讨论已超出了本文的讨论范围,但我会在基于 SASS 的样式表中简要介绍使用媒体查询的基础知识。请参阅 Resources,获取有关 SASS 的更多信息。
SASS 行为中的媒体查询与普通 CSS 中的完全相同,但有一个例外:它们可以嵌套在其他 CSS 规则中。当一个媒体查询嵌套在另一个 CSS 规则中时,会将规则置于样式表的顶层,如清单 11 所示。
清单 11. 嵌套的媒体查询

header { width: 400px; @media (min-width: 800px) { width: 100%; }}

清单 11 中的示例将编译到清单 12 的代码中。
清单 12. 编译结果

.header { width: 400px;}
@media (min-width: 800px) { .header { width: 100%; }}

组织您的媒体查询
现在,我们已经了解了如何编写媒体查询,是时候考虑采用以一种合乎逻辑的、有组织的方式将媒体查询部署到您的 CSS 代码中了。确定如何组织媒体查询很大程度上是一种个人偏好。这一小节将探讨两种主要方法的优点和缺点。
第一个方法是为不同屏幕大小指定完全不同的样式表。优点是规则可以保存在独立样式表中,这使得显示逻辑能够清楚地划分出来,更便于团队进行维护。另一个优势是源代码分支之间的合并变得更为容易。但优点同时也是缺点。如果要为每个媒体查询创建单独的样式表,则无法将一个元素的所有样式表放在同一文件夹的同一位置。当改变一个 CSS 中的一个元素时,需要创建多个位置进行查看,这使得网站 CSS 的维护变得更加困难。
第二个方法是在现有样式表中使用媒体查询,该样式表就在定义其余元素样式表的位置的旁边。这种方法的优势是可以将所有元素样式保存在同一个位置。当在团队模式下工作时,这种做法可以创建更多源代码合并工作,但这是所有基于团队的软件开发都可以管理且常见的一部分。
没有所谓正确或错误方法。您只需选择最适合您的项目和团队的方法即可。

mixins

LESS 减少重复的另一种方式是让您指定可添加到其他规则中的一组规则。在 responsive.less 中,我使用了此 mixin 技术来跨两个不同的媒体查询表达常见规则,如清单 10 所示:

清单 10. LESS 中 mixins 的使用

CSS

.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); float: left; } #widget-container { width: (@widgetoutwidth * @scale * 0.75 - @extrabuffer); float: right; } .widget-content { width: (@widgetinwidth * @scale * 0.75 - @extrabuffer); } } //Rules for viewing from 401px to 800px @media (min-width: 401px) and (max-width: 800px) { .media-body; } //Rules for viewing smaller than 400px @media (max-width: 400px) { .media-body(0.3); //Extra manipulation of some rules #main-content { padding: 0px; } #widget-container { width: padding: 0px; } .widget-content { margin: 5px; } .widget-text { display: none; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.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);
    float: left;
  }
  #widget-container {
    width: (@widgetoutwidth * @scale * 0.75 - @extrabuffer);
    float: right;
  }
  .widget-content {
    width: (@widgetinwidth * @scale * 0.75 - @extrabuffer);
  }
}
 
//Rules for viewing from 401px to 800px
@media (min-width: 401px) and (max-width: 800px) {
  .media-body;
}
 
//Rules for viewing smaller than 400px
@media (max-width: 400px)  {
  .media-body(0.3);
  //Extra manipulation of some rules
  #main-content { padding: 0px; }
  #widget-container { width: padding: 0px; }
  .widget-content { margin: 5px; }
  .widget-text { display: none; }
}

Mixins 可以接受参数,比如 清单 10 中方框大小的比例因子。默认的比例因子是 0.75。清单 10 在可视区中使用从 401px 到 800px 的默认大小。为了在小于 400px 的尺寸下进行查看,比例因子被更改为 0.3,并且在该区域添加了一些额外规则。

图 2 显示了 responsive.html 的浏览器显示,它使用了 responsive.less。我减小了浏览器的宽度,以满足小于 400px 的宽度的媒体查询,这样一来您就可以看到页面在小型移动设备上是什么样子。

图 2. responsive.html 的低宽度浏览器输出

 图片 2

在我 Mac 上的 Safari 中,当浏览器宽度接近 500px 时,小于 400px 的宽度的媒体查询被触发。该行为引出了一个重要观点。媒体查询基于视区 这一概念。视区是可视浏览器空间的数量,用 CSS 像素进行定义,并通过设备和浏览器进行确定。CSS 像素不同于设备像素;例如,如果用户缩放浏览器视图,那么像素模型之间的关系就会发生变化(参见 参考资料)。此外,设备和浏览器设置的视区大小不同于实际显示的窗口大小。在 图 2 中就是如此:窗口大约是 500px,但 CSS 将其作为 400px 宽的视区加以处理。这一现象强调了这样一个事实:与所有 Web 开发技术一样,响应式设计需要完善的跨设备测试。

浏览器支持

到现在为止,您可能已经相信 CSS 媒体查询是一个强大的工具,而且想知道哪些浏览器支持 CSS 媒体查询。以下是这方面的好消息和坏消息。

好消息是:大多数现代浏览器(包括智能手机上的浏览器)都支持 CSS 媒体查询。
坏消息是:最近,来自 Redmond 的 Windows® Internet Explorer® 8 浏览器不支持媒体查询。对于大多数专业 Web 开发人员来说,这意味着您需要提供一个解决方案,以便在 Internet Explorer 中支持媒体查询。

下列解决方案是一个名为 respond.js 的 JavaScript polyfill。

带有 respond.js 的 Polyfill
Respond.js 是一个极小的增强 Web 浏览器的 JavaScript 库,使得原本不支持 CSS 媒体查询的浏览器能够支持它们。该脚本循环遍历页面上的所有 CSS 引用,并使用媒体查询分析 CSS 规则。然后,该脚本会监控浏览器宽度变化,添加或删除与 CSS 中媒体查询匹配的样式。最终结果是,能够在原本不支持的浏览器上运行媒体查询。
由于这是一个基于 JavaScript 的解决方案,所以浏览器需要支持 JavaScript,以便运行脚本。该脚本只支持创建响应式设计所需的最小和最大width 媒体查询。这并不是适用于所有可能 CSS 媒体查询的一个替代。在 参考资料 部分,可以阅读关于该脚本特性和局限性的更多信息。
Respond.js 是您可以选择的诸多可用开源媒体查询 polyfills 之一。如果您觉得 respond.js 无法满足您的需求,在进行一个小小的研究之后,您就会发现几个替代方案。

结束语

我是一名软件架构师兼开发人员,但绝不是一名 Web 设计人员。凭借 LESS,我可以利用我的编程技能快速开发更便于理解和维护的 CSS。变量和 mixins 使我能够快速做出调整,查看其效果,无需在整个 CSS 文件内四处移动,查找我需要进行相关更改的内容。

响应式设计是经济适用的可管理移动 Web 设计中的一项公认的关键技术。它在针对打印等可访问性和其他演示模式的设计中也很有用。由于为应对媒体查询而应用的多种样式处理起来很繁琐,所以 LESS 简化和组织 CSS 代码的功能愈发有价值。

赞 1 收藏 评论

图片 3

几种常见的浏览器兼容性问题

js

  1. HTML对象获取问题

FireFox:document.getElementById("idName");ie:document.idname或者document.getElementById("idName").解决办法:统一使用document.getElementById("idName");

2.const问题

Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.

3.event.x与event.y问题

IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

4.window.location.href问题

IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.

5.firefox与IE的父元素(parentElement)的区别

IE:obj.parentElement
firefox:obj.parentNode
解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.

6.集合类对象问题

IE下,可以使用 () 或 [] 获取集合类对象;
Firefox下,只能使用 [ ]获取集合类对象。
解决方法:统一使用 [] 获取集合类对象。

7.自定义属性问题

IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute() 获取自定义属性;
Firefox下,只能使用getAttribute() 获取自定义属性。
解决方法:统一通过getAttribute() 获取自定义属性。
对象属性的设置写为:document.getElementById(‘元素ID属性值’).setAttribute(‘width’, ‘100’)
document.getElementsByTagName(‘元素标签名’)[0].setAttribute(‘width’, ‘100’)

8.input.type属性问题

IE下input.type属性为只读;但是Firefox下input.type属性为读写。
解决办法:不修改input.type属性。如果必须要修改,可以先隐藏原来的input,然后在同样的位置再插入一个新的input元素。

9.Table操作问题

ie、firefox以及其它浏览器对于 table 标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChild方法也不管用。
解决方法://向table追加一个空行:
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild(cell);
[注] 由于俺很少使用JS直接操作表格,这个问题没有遇见过。建议使用JS框架集来操作table,如JQuery。

css

1.cursor:hand VS

cursor:pointerfirefox不支持hand,但ie支持pointer
解决方法: 统一使用pointer

2.innerText在IE中能正常工作,但在FireFox中却不行. 需用textContent。

解决方法:
if(navigator.appName.indexOf("Explorer") > -1){ document.getElementById('element').innerText = "my text";} else{ document.getElementById('element').textContent = "my text";}

3.CSS透明

IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。
opacity 透明,子元素会继承透明属性。
解决方式:1、使用 background:rgba(0,0,0,.6) //IE8及以下无效果。 2、使用定位,背景色与子元素处于同级关系。

4.css中的width和padding

在IE7和FF中width宽度不包括padding,在Ie6中包括padding.

5.IE5 和IE6的BOX解释不一致

IE5下div{width:300px;margin:0 10px 0 10px;}
div 的宽度会被解释为300px-10px(右填充)-10px(左填充),最终div的宽度为280px,
而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。
这时我们可以做如下修改 div{width:300px!important;width :340px;margin:0 10px 0 10px}

6.ul和ol列表缩进问题

消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px;经验证,在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在 Firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list- style:none才能去除列表编号或圆点。
也就是说,在IE中仅仅设置margin:0px即可达到最终效果,而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。

7.元素水平居中问题

FF: margin:0 auto;
IE: 父级{ text-align:center; }

8.margin加倍的问题

设置为float的div在ie下设置的margin会加倍。
这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;

9.IE与宽度和高度的问题

IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:
.box{ width: 80px; height: 35px;}html>body .box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

10.IE6下图片下有空隙产生

解决这个BUG的技巧有很多,可以是改变html的排版,或者设置img为display:block或者设置vertical-align属性为vertical-align:top/bottom/middle/text-bottom 都可以解决.

11.对齐文本与文本输入框

加上vertical-align:middle;
<style type="text/css">
</style>经验证,在IE下任一版本都不适用,而ff、opera、safari、chrome均OK

12.为什么web标准中IE无法设置滚动条颜色了

解决办法是将body换成html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css"></style>

13.为什么无法定义1px左右高度的容器

IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多:
例如:overflow:hidden  zoom:0.08   line-height:1px

14.为什么FF下文本无法撑开容器的高度

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:{ height:auto!important; height:200px; min-height:200px; }

15.FORM标签

这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}

16.超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A
a标签有四个“状态”的先后过程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active不能设置有无下划线(总是有的),下面有个示例大家可以看看

表示所有状态下的连接 如 a{color:red}
① a:link:未访问链接 ,如 a:link {color:blue}
② a:visited:已访问链接 ,如 a:visited{color:blue}
③ a:active:激活时(链接获得焦点时)链接的颜色 ,如a:active{color:blue}
④ a:hover:鼠标移到链接上时 ,如 a:hover {color:blue}
一般a:hover和a:visited链接的状态(颜色、下划线等)应该是相同的。

 举例:伪类的常见状态值 
代码如下:
<style type = “text/css”> 
a {font-size:16px} 
a:link {color: blue; text-decoration:none;} //未访问:蓝色、无下划线 
a:active:{color: red; } //激活:红色 
a:visited {color:purple;text-decoration:none;} //已访问:purple、无下划线 
a:hover {color: red; text-decoration:underline;} //鼠标移近:红色、下划线 
</style> 

js兼容文件

使IE5,IE6兼容到IE7模式(推荐)
<!–[if lt IE 7]><script src=” type=”text/javascript”></script><![endif]–>

使IE5,IE6,IE7兼容到IE8模式
<!–[if lt IE 8]><script src=” type=”text/javascript”></script><![endif]–>

使IE5,IE6,IE7,IE8兼容到IE9模式
<!–[if lt IE 9]><script src=”;

浏览器识别符

p{ _color:red; } IE6 专用
*html p{ color:#red; } IE6 专用
p{ +color:red; } IE6,7 专用
p{ *color:red; } IE6,7 专用
html p{ color:red; } IE6,7 专用
p{
+color: red;} IE7 专用
Body> p{ color: red; } 屏蔽 IE6
p{ color:red9; } IE8

Firefox: -moz-
Safari: -webkit-
Opera: -o-
IE: -ms-

更多请查看:http://www.jq-school.com/

http://www.w3cfuns.com/notes/18090/961a36d50f2efa676061b5a02c374f75.html

本文由软件综合发布,转载请注明来源:兑现越多效果与利益