窗窗meta標籤的理解

本文轉自w3cplus

作者:大漠 日期:2013-02-02 点击:789

 

特别声明:此篇文章由杨礼鑫根据Paulund的英文文章原名《Understanding The Viewport Meta Tag》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://www.paulund.co.uk/understanding-the-viewport-meta-tag以及作者相关信息

——作者:Paulund

——译者:杨礼鑫

在设计网页时,响应式设计是众多考虑之一。有一个问题就是,你做的网站到底需不需要响应式设计?

在我认为所有面向大众的网站都应该把响应式设计纳入考虑范围。当然一些朋友会觉得这没必要,因为在使用 移动设备的时候可以利用缩放来浏览我们感兴趣的内容,但我还是认为开发人员应该让你的网站在任何设备上都方便浏览。

什么是响应式设计?

响应式设计是一种让你的网页在不同尺寸的设备上都能够自适应的设计方式,依据你设置的断点,通过CSS文件的媒体查询改变网页元素的样式来实现。仅仅在一些元素上添加width:100%样式都能够让他们适应不同的屏幕。

断点会为不同宽度范围下的内容指定各自的CSS样式,特别是比如一些尺寸不一样的手机,7英寸平板,10英寸平板,13英寸笔记本和一般的显示器。

你可以使用像素宽度或者像素比来定义断点。下面一段代码教你如何使用 媒体查询

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {
  /* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
  /* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
  /* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
  /* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {
  /* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
  /* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
  /* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
  /* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles */
}	

Boilerplate media queries

扩展阅读

  1. CSS3 Media Queries
  2. CSS3 Media Queries模板
  3. 使用em单位创建CSS3的Media Queries 主标签
  4. Responsive设计和CSS3 Media Queries的结合
  5. iPads和iPones的Media Queries
  6. 此像素非彼像素

定义视窗

视窗meta标签能告诉浏览器如何规范的渲染网页,然而你则需要告诉它视窗有多大。

视窗就是我们能看到页面的部分。举个栗子:好比你在手机上浏览网站,当你放大页面去看左上角的内容时,视窗的宽度会被设置为定值;当你已经能够看到整个的网页宽度,继续缩小页面时,视窗的宽度则会跟页面的宽度一致。

下面的例子给出了视窗meta标签的用法。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">	

代码以显示网页的屏幕宽度定义了视窗宽度。网页的比例和最大比例被设置为100%。

不同的浏览器视窗不同。大部分移动端浏览器都是用默认的980px宽度的视窗,这表示绘制网页时宽度是980px,通过缩小才能浏览整个网页。

屏幕尺寸越小的设备,在其显示的网页被显示的越小。如果你对比同一个网站分别在iphone和ipad上浏览,你会发现它在爱疯上会小得多。

改变视窗的赋值能够让你制定设备如何绘制网页。

视窗宽度

指定视窗宽就仿佛告诉了浏览器你的网页在这个宽度下显示是最合适的。你要是做了一个专门在iPhone上浏览的网页,那么你就设置视窗宽为320px.

<meta name="viewport" content="width=320">	

但是这不易于 响应式设计,因为当你在平板上浏览它的时候,它会被缩小到320px的区域中。在响应式设计中最好指定视窗宽和设备的屏宽一致。

<meta name="viewport" content="width=device-width">	

视窗缩放

在移动端,屏幕上开合手指可以控制缩放,但当你设定视窗宽和设备宽度一致时,你就没必要去放大浏览整个网页了。为了确保网页的初始显示不是放大过的,你可以用initial-scale属性来设置初值。

若用户在浏览过程中不需要缩放,你可以设置它为1。

<meta name="viewport" content="initial-scale=1">	

甚至是如果你连用户的滚屏操作都想禁止,你可以设置maximum-scale为1,这样就完全不能放大了。

<meta name="viewport" content="maximum-scale=1">	

几个视窗的例子

下图说明了一张图片在两个不同视窗中的显示。第一张是默认980px宽度视窗下的图片显示,第二章是320px宽度的视窗。

视窗980

视窗980

图片来自于:Apple explanation of viewport meta tag

视窗的理解

如果你还想看看更多关于使用不同尺寸视窗的例子,这儿有个Github项目包含了多视窗的设定。这个链接里面是一个移动端浏览器,从那你可以直观的看到效果。

理解视窗

译者手语:初次翻译前端技术博文,整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

关于杨礼鑫

毕业于武汉大学,是一名专业的PHP程序员。强烈的兴趣爱好在计算机图形学,特效,3D和游戏,还有前端,才培养的;喜欢设计和创意。欢迎随时关注我:新浪微博

如需转载烦请注明出处:

英文原文:http://www.paulund.co.uk/understanding-the-viewport-meta-tag

中文译文:http://www.w3cplus.com/css/understanding-the-viewport-meta-tag.html

CSS權重

你應該知道的一些事情——CSS權重

文章轉自w3cplus
 
作者:99 日期:2012-12-21 点击:1500

 

本文由99根据的《CSS Specificity: Things You Should Know 》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know,以及作者相关信息

作者:

译者:99

除了浮动之外,css权重问题是你要了解的,最复杂的一个概念之一。css每条规则权重的不同,是你所期望的效果,没有通过css规则在元素上生效的主要原因。为了减少调试bug的时间,你需要了解浏览器是怎样解析你的代码的。为了完成这个目标,你需要对权重是如何工作的,有一个清楚的认识。很多Css出现问题的场景,都是某处定义了一个更高权重的规则,导致此处规则不生效。

Css权重问题并不简单,而且有很多或具体或抽象的理论来解释这个问题。本文也将探讨这个问题,我相信如果你喜欢星球大战的话你肯定会理解这些概念的~

我们将会讨论关于css权重的主要问题,包括例子,规则,原理,通用解决方案以及一些资源。

CSS权重:概述

  1. 权重决定了哪一条规则会被浏览器应用在元素上。
  2. 权重的不同,是你所期望的效果,没有通过css规则在元素上生效的主要原因。
  3. 权重的级别划分时包含了所有的css选择器
  4. 如果两个选择器作用在同一元素上,则权重高者生效。
  5. 权重的级别根据选择器被划分为四个分类:行内样式,id,类与属性,以及元素。
  6. 你可以通过CSS权重之争进一步了解CSS权重。
  7. 你也可以通过CSS Specificity for Poker Players进一步了解CSS权重。
  8. 如果两个选择器权重值相同,则最后定义的规则被计算到权重中(后面定度的CSS规则权重要更大,会取代前面的CSS规则)
  9. 如果两个选择器权重值不同,则权重大的规则被计算到权重中
  10. 如果一条规则包含了更高权重的选择器,那么这个规则权重更高
  11. 最后定义的规则会覆盖所有跟前面冲突的规则
  12. 内联样式表含有比别的规则更高的权重
  13. Id选择器的权重比属性选择器更高
  14. 你可以使用id来增大权重
  15. 类选择器比任意数量的元素选择器都高
  16. 通配符选择器跟继承来的样式,他们的权重以 0,0,0,0来计算
  17. 你可以用css权重计算器来计算权重。

什么是CSS权重?

  1. 权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。参考阅读【Understanding specificity
  2. 当很多的规则被应用到某一个元素上时,权重是一个决定哪种规则生效,或者是优先级的过程。参考阅读【Selector Specificity
  3. 每个选择器都有自己的权重。你的每条css规则,都包含一个权重级别。 这个级别是由不同的选择器加权计算的,通过权重,不同的样式最终会作用到你的网页中 。参考阅读【Understanding specificity
  4. 如果两个选择器同时作用到一个元素上,权重高者生效。

权重等级

每个选择器在权重级别中都有自己泾渭分明的位置。根据选择器种类的不同可以分为四类,也决定了四种不同等级的权重值。

1、行内样式,指的是html文档中定义的style

行内样式包含在你的html中 对你的元素产生直接作用,比如:

<h1 style="color: #fff;">header</h1>

2、ID选择器

Id也是元素的一种标识,比如#div

3、类,属性选择器和伪类选择器

这一类包括各种class,属性选择器,伪类选择器比如 :hover,:focus等等。

4、元素和伪元素

元素跟伪元素选择器,比如:before 与 :after.

 

这里我要补充的:伪元素选择器只包含以下几种:

  1. ::after
  2. ::before
  3. ::first-letter
  4. ::first-line
  5. ::selecton

详细请参阅【Pseudo-elements

伪元素跟伪类都是选择器的补充,但是,伪类表示的是一种“状态”比如hover,active等等,而伪元素表示文档的某个确定部分的表现,比如::first-line 伪元素只作用于你前面元素选择器确定的一个元素的第一行。

注意,伪元素选择器选择出来的“部分” 不在dom里,也不能对其绑定事件。如果你对伪元素前面的选择器定义的元素绑定了事件,伪元素同样会生效。 永远记得 伪元素生成的是“表现”。

扩展阅读:

  1. 如何给伪元素绑定事件
  2. w3c规范中的伪元素

99

 

如果您对CSS选择器还不太了解,或者说不太清楚CSS有哪些选择器,个人建议你先阅读以下几篇文章,这样更有助于帮助你阅读本文后面的内容:

  1. 《CSS3基本选择器》
  2. 《CSS3属性选择器》
  3. 《CSS3伪类选择器》
  4. 《CSS选择器优化》

大漠

如果你还分不清楚这些是怎么分类的,你可以看一下文章末尾的一个简短的分类。

怎么确定权重

权重记忆口诀。从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10,一个元素名,或者伪元素+1.比如

body #content .data img:hover

最终的权重值是0122;#content是一个id选择器加了100,.data是一个class类选择器加了10,:hover伪类选择器加了10, body和img是元素加了1 。详细参阅【CSS Specificity

另一种方法:计算有几个id选择器的数量为a ,计算其他属性跟class选择器的数量为b ,计算元素名跟伪元素名的数量为c ,然后结合起来就是权重。详细参阅【CSS Selector Specificity]

为了帮助我更好的理解权重的概念,我制作了一张西斯人物能量表(大家可以自动类比为各种赛亚人,奥特曼战斗力对照表)每个角色(选择器)都拥有西斯能量(权重值,就跟赛亚人的战斗力一样),这个决定了这个人在黑暗势力里有多牛逼,也决定了css规则在你的样式表里有多牛逼。详细参阅【CSS Specificity Wars – Cheat Sheet

oocss

权重计算测试

利用第一个规则可以很容易计算权重,你可以自己试试看看掌握了没

01. *{}                         ====》0
02. li{}                        ====》1(一个元素)
03. li:first-line{}             ====》2(一个元素,一个伪元素)
04. ul li {}                    ====》2(两个元素)
05. ul ol+li{}                  ====》3(三个元素)
06. h1+ *[rel=up] {}            ====》11(一个属性选择器,一个元素)
07. ul ol li.red{}              ====》13(一个类,三个元素)
08. li.red.level{}              ====》21(两个类,一个元素)
09. style=""                    ====》1000(一个行内样式)
10. p {}                        ====》1(一个元素)
11. div p {}                    ====》2(两个元素)
12. .sith {}                    ====》10(一个类)
13. div p.sith{}                ====》12(一个类,两个元素)
14. #sith{}                     ====》100(一个ID选择器)
15. body #darkside .sith p {}   ====》112(1+100+10+1,一个Id选择器,一个类,两个元素)

权重的基本规则

1、相同的权重:以后面出现的选择器为最后规则:

假如在外部样式表中,同一个CSS规则你写了两次,那么出现在前面的选择器权重低,你的样式会选择后面的样式:

#content h1 {
  padding: 5px;
}

#content h1 {
  padding: 10px;
}

两个选择器的权重都是0,1,0,1,最后那个规则生效。

2、不同的权重,权重值高则生效

选择器可能会包含一个或者多个与权重相关的计算点,若经过计算得到的权重值越大,则认为这个选择器的权重高。详细参阅【Understanding Specificity

CSS权重规则

1、包含更高权重选择器的一条规则拥有更高的权重。详细参阅【Understanding Specificity

2、Id选择器的权重比属性选择器高,比如下面的例子里 样式表中#p123的权重明显比[id=p123]的权重要高。

A:
a#a-02 { background-image : url(n.gif); }

and

B:
a[id="a-02"] { background-image : url(n.png); }

因此A规则比B规则的权重要高。详细参阅【W3C CSS 2.1 Specification

3、带有上下文关系的选择器比单纯的元素选择器权重要高。这条规则同样也适用于含有多个元素的选择器。详细参阅【Cascade Inheritance

4、与元素“挨得近”的规则生效,比如css中我们定义了以下的规则,

#content h1 {
  padding: 5px;
}

但html 中也定义了规则:

<style type="text/css">
  #content h1 {
    padding: 10px;
  }
</style>

Html中定义的规则因为跟元素挨得比较近,所以生效。详细参阅【Understanding Specificity

5、最后定义的这条规则会覆盖上面与之冲突的规则。比如下面的例子:

p { color: red; background: yellow }
p { color: green }

段落会呈现绿色的文字。当然也会出现黄色的背景,因为第一条规则只是被覆盖了color属性。详细参阅【BrainJar.com

6、无论多少个元素组成的选择器,都没有一个class选择器权重高。比如说“.introduction”高于“html body div div h2 p”。详细参阅【CSS Specificity for Poker Players

7、通配符选择器也有权重,权重被认为是 0,0,0,0。比如 *, body * 被继承的css属性也带有权重,权重是0,0,0,0。详细参阅【CSS Specificity Clarified

权重的例子

考虑三个代码片段:

A: h1

B: #content h1

C:
<div id="content">
  <h1 style="color: #fff">Headline</h1>
</div>

A的权重是0,0,0,1 (一个元素),B的权重是0,1,0,1(一个id选择器,一个元素),c的权重是1,0,0,0 ,这是一个行内样式。

因为0001 = 1 < 0101 = 101 < 1000,第三个规则权重最高,因此第三个规则将会生效。若去掉第三个规则,第二个规则将会生效。

权重实战

1、利用LVHA原理来给链接应用样式:如果你想展现不同状态的链接样式,一定要记住link-visited-hover-active的顺序,或者简写为LVHA。详细参阅【Link Specificity

2、永远都不要使用“!important”:“如果你遇到了权重问题,第一个解决方法肯定是去掉“!important”,“!important”会覆盖所有的样式规则,但“!important”根本没有结构与上下文可言,所以很少用到。详细参阅【Understanding SpecificitySelector Specificity

3、利用id增加选择器权重:利用ul#blogroll a.highlight代替a.highlight ,权重由0, 0, 1, 1 变成了0, 1, 1, 2。

4、减少选择器的个数:“在css规则中尽可能的使用较少的选择器”。详细阅读【Understanding Specificity

CSS权重计算工具及资源

1、扑克牌权重计算法

如果你之前没有编程经验,css让你看得比较晕,这个比喻可以帮你把一些概念弄得更清楚。把css规则作为你手中的牌,最好的一套牌决定了你最终的样式。

2、Css权重计算器

计算这个选择器的权重

3、Understanding Specificity Tutorial

在这个教程中,你会关注权重。css权重关系到你的css规则是怎样显示的。你样式表中的每条css规则都带有一个权重,这个权重级别是由不同的选择器加权计算的,通过权重,不同的样式最终会作用到你的网页中。

4、Cascade Inheritance: Specificity

这里会对权重问题进行一番讨论。这些规则不仅仅存在于一张样式表中,也有可能是多张样式表。首先要明白,一个元素可以被多个规则定义样式。

5、CSS 2.1 Selectors Explained

对css2.1选择器的一个全面的阐述。通过详尽的了解css2.1的选择器,可以很大程度上优化你的html,比如减少不必要的class属性,增加大量的div或者span标签等。

6、CSS Specificity Bugs in IE

Ie中权重bug的一个简短概述

7、CSS Structure and Rules

基本的css语法,伪类及伪元素,还有层叠规则。

8、Specificity

他看上去不怎么重要,你也可能一直用不上,但是在大的项目中,你的CSS文件变得越来越大,那么这个时候你的CSS就有可能会产生冲突。

什么是什么?

1、一个选择器给元素定义了一个独特的样式。

p { padding: 10px; }

2、一个类选择器利用类(在页面中可能会有多个)定义选择器

p.section { padding: 10px; }

3、一个id选择器利用页面中唯一一个id标识符定义一个选择器

CSS: #section { padding: 10px; }

(X)HTML: <p id="section">Text</>

4、上下文选择器可以定义一个带有层级关系顺序的规则

p span { font-style: italic; }

上面这一条,所有在p元素中的span元素将会被应用样式"font-style: italic;"。

5、一个属性选择器匹配了一个带有特殊属性或者属性的值的元素

p[title] { font-weight: bold; }

匹配所有带有title属性的元素

6、伪类,是一种特殊的class,用来定义html元素的行为。一般都是用来给一些html元素的特定状态定义特殊效果。当触发这个状态时,效果也会生效。

a:visited { text-decoration: underline; }

7、伪元素,让设计者可以给实际不存在于文档中的内容定义样式。伪元素属于特殊的元素,可以利用伪元素来“凭空”生成内容,列表项的数字等。

p:first-line { font-variant: small-caps; }
a:link:after { content: " (" attr(href) ")"; }

 

上面罗列的是CSS选择器中的七种,但实际上CSS的选择器是不只这些,特别是CSS3,在CSS2.1的基础上增加了些很有意思的选择器,在不需要类名的情况下都能帮你选择到需要的元素。感兴趣的话可以阅读下列的文章:

  1. 《CSS3基本选择器》
  2. 《CSS3属性选择器》
  3. 《CSS3伪类选择器》
  4. 《CSS选择器优化》

大漠

译者手语:初次翻译前端技术博文,整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

如需转载烦请注明出处:

英文原文:http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know

中文译文:http://www.w3cplus.com/css/css-specificity-things-you-should-know.html