样式名称面面观

我们在项目中经常需要对某些元素设置尺寸,如输入框、文本框、字号大小等等。这些尺寸的宽度可能是步进的,也可能是随机的数字。下面的css命名方式你可能遇到过。

.font12{font-size:12px;}
.font14{font-size:14px;}
.input-200{width:200px;}
.input-200{width:200px;}
.textarea-200{width:200px;height:200px;}
.textarea-400{width:400px;height:400px;}

这些样式可能会被我们当成公用样式,在任何页面的任何地方使用,多次复用,符合咱们css优化的逻辑,而且样式的命名非常语义话,一点都不怕分不清楚。

但是我们也要注意到这种直观的命名方式的所隐藏的危险,当我们的产品达到一定量级的时候,突然接到一个产品需求,就是老大们觉得目前的字号太小,让我们改大一号,那我们如何操作呢?

第一种方式,最简单也最直接,那就是直接修改css,PHP不用去改动,这种好处就是页面构建工程师可控。我们的方案就是:

.font12{font-size:13px;}

很快漫山遍野使用 font12 样式的元素都变化了,很快很强大,但是问题是原来直观的样式名名不副实了,让后来的小弟弟、小妹妹们都迷惑了。
还有一种兴师动众的方案,让对css样式陌生的PHP/asp/jsp工程师一起动手吧!我们这边将样式做修改:

.font13{font-size:13px;}

PHP/asp/jsp 师们则漫山遍野、沟沟坎坎的找 <element class=”font12″>将他们变成<element class=”font13″>,人多了,出错的几率就大了,风险也大了,挨骂的几率也高了。

有没有更好的解决方案呢?其实问题的源头就在于咱们起的那个名字上,不是有人说“名字决定命运吗?”,名字起的不好注定命运坎坷,名字带个“金”啊“斗”啊肯定幸福美满。咱们的应该起个更有诗意的名字而不是那么直白的“臭蛋”、“狗屎”。

大家每个人都买过衣服吧?咱们回想一下 XS、S、L、XL、XXL、XXXL,并且我们经常碰到不同品牌的产品相同的号码实际上却不一样大。这又时常不是我们日常中碰到的呢?比如我们经常看见一些CSS框架库,他们是英语国家发明的,当我们在使用的时候就需要根据自己的情况做修改了。

言归正传,回到样式的命名上,我们根据衣服的经验来重新命名,让它从根上更健壮一些。

.font-xs{font-size:9px;}
.font-s{font-size:10px;}
.font-x{font-size:12px;}
.font-xl{font-size:14px;}
.font-xxl{font-size:16px;}
.font-xxxl{font-size:18px;}

这样当我们改动属性值的时候,是不是觉得更优雅呢?不用纠结于那些直白的数字。

其实直白的数字也没有那么可怕,我们使用栅格布局的时候,直白的数字让我们更方便,比如我们固定宽度的布局,我们可以预设一个基本单位,这个的宽度是80,我们可以像下面这样部署不同宽度的东西。名字如下:

.col-1{width:90px;}
.col-2{width:180px;}
.col-3{width:270px;}
...
.col-9{width:810px;}
.col-10{width:900px;}

步进式的命名也很容易控制。当我们看到设计稿不符合规则的时候,我们就需要让他们修改一下设计稿,让我们的计算更加方便。

Photoshop转css3工具

还在为CSS3各种长长的属性名称和各种浏览器的前缀搞的焦头烂额?懒人的需求就是勤快人努力的方向。所以今天给大家推荐一个好用将 Photoshop 的圆角渐变转成css的好工具 — CSS3PS

官网上有详细的介绍,如何安装如何使用,操作完成后,我们就是在相应的图层点击一下这个工具,我们就能很方便的得到相应的 CSS。

懒人们肯定会想,如果有个工具把相应的 HTML 也生成好,就完美了…

自定义wordpress头像显示

通过gravatar.com创建一次头像,就可以在所有支持其的网站上使用一致的头像,当你更新一次的时候,你在其它网站的留言之类的头像也会变换,很好的玩意。
最近在做网站改版,网站通过wordpress实现,这里面的问题是我们很多的编辑并不希望去gravatar.com创建属于自己的头像,他们希望没有头像的时候不去显示默认的那个小圈圈,使用组内统一的头像。那么让我们来看一下wordpress获取头像的函数吧!

function get_avatar( $id_or_email, $size = '96', $default = '', $alt = false ) {
.....
}

我们可以很直观的看到其所带的参数,我们可以设置尺寸、文件的默认源地址、是否显示头像悬浮卡。下面是根据项目的具体需要设置的代码:

get_avatar(get_the_author_meta('ID'), 50,'http://uedsina.sinaapp.com/wp-content/themes/ued/images/thumb.gif');

大家方便的时候可以一试。注意图片的格式必须为 GIF形式,反正我是用jpg的时候是没搞出来。

PHP header() 函数实现301转向的小问题

当我们为网站改版的时候,为了和线上环境完全一致,有时候我们会在线上做一个文件夹,测试我们的数据,但是不知不觉的,搜索引擎也来凑热闹,到真实上线的时候,我们需要删除它,可是搜索引擎中依旧保持着这个链接地址,这时我们要坚定的告诉搜索引擎我们搬家了,用 301 转向技术来更新。
可以通过配置 .htaccess 文件来实现 301跳转,但是最直白的还是使用 php本身的header()函数。
我们可以将测试环境中页面用 301 转向跳转的目标页面

<?php
header('HTTP/1.1 301 Moved Permanently');
header('Location:http://var.com');

其实问题的关键不是上面的代码,今天遇到的问题是,我写的这段代码总是提出警告,说在header前有输出,我们使用 dreamwaver 和 editplus 等编辑软件的时候,他会在其前面增加东西,所以果断的用记事本建了一个空文件,改名为php,拷贝入代码解决之。

解读OOCSS

面向对象的 css 已经提出多年,并已经在业内获得了很大的成功,但是你对这种思想了解多少呢?反正我是因为不甚了解才去读了读下stubbornella / oocss 的 FAQ 页面,才疏学浅,希望大家去看项目的地址:https://github.com/stubbornella/oocss/wiki/FAQ

OOCSS中”对象”的意义

我使用了一个 Java 或者 PHP 语言的对象的概念来描述面向对象的理念。(虽然他们在的复杂程度并不一致)

一个css对象由下面四部分构成:

  • HTML,它可能是一个或者多个Dom节点。
  • 关于这些节点的css声明,这些文档节点被包含子一个有样式名的父节点里面。
  • 用于展示背景图片和拼合图片的组件。
  • 和这个对象相关的 Javascript 交互,媒体或者与之相关的其它方法。

这可能会让人迷惑,因为 CSS 样式并不是对象本身所必需的,但是可以拥有一个容器样式属性。

比如:

<div class="mod">
        <div class="inner">
                <div class="hd">Block Head</div>
                <div class="bd">Block Body</div>
                <div class="ft">Block Foot</div>
        </div>
</div>

一个对象就是一个模块,由模块的样式来标示。它包含四部分节点属性(这些不能脱离模块独立存在,包含两个必须的区域,inner 和 body,另两个可选的区域,头部和脚部。)

OOCSS 如何提升性能的?

页面的性能优势的提升可以归纳为两个方面:

  1. 1.高重用率的CSS代码,这样就能减少代码,这也就意味着:
    • 更小的文件,更快的传输速率。
    • 高比例的css代码在大多数站点的页面下重用而可能被浏览器缓存下来。
  2. 对于浏览器来说更少的继承关系,和更少的页面重绘和布局计算。

在一个单独的页面中,如果css 规则重用的越多,浏览器渲染引擎花在计算最终值的时间越少。

我需要使用 ID 来定义内容的样式吗?

这里有两个不使用ID定义内容样式的原因。

  1. 它们有更高的权重,使权重计算变乱了。(这是最主要的原因)
  2. 它们有唯一性,这样组件在一个页面中只能使用一次,无法在重用。

当我们在一个页面中重用对象(如果缓存正常的话整站都可重用),那样子,它就不会有任何的性能开销。通过ID定义样式的话就无法在相同的页面使用两个相同的元素。与看上去更准确描述的ID相比,class 更有效。这里也可能有些情况你希望使用ID定义样式,比如 头部的导航非常特殊。因此在使用ID定义样式前,你必须仔细考虑它比 class 带来的益处是什么。你无法预期在网站的发展过程中,什么人会使用你的样式构建HTML。如果可以选择,那就让其越宽松越好。

我在我的模板中移除了 head,body,和 foot 的id。因为某些人可能会有多重的主内容区域。虽然暂时无法预计有多重的头部和页脚,但是也不能保证某天会有设计师去这么做,因此 id 定义样式的意义就没有了。

另一方面,ID 作为js的hook更好。将其放到HTML的原因并不是为了定义样式。

设计师不能编写OOCSS,是吗?

设计师本能的理解对象,他比我们大多数目前在编写css的人更关注于此,当然也有一些例外(这就像看到一个老妇人吃苍蝇一样难受)。事实上,他们喜欢OOCSS有两个主要的原因。

  1. 当创建高访问量的网站时,通过这种方式能加快产能。他们不必非要搞清具体的结构才开始,他们可以创造合理的组件和基本的逻辑构造。
  2. 学习CSS的过程,他们不必从丑陋的“Hello world” 开始。设计师可以只去关注那些美的东西。如果他们必须从基础学起,他们会很快的感觉受到挫折或者迷惑。OO-css 让他们在每个学习阶段的的作品都很漂亮。

设计师是聪明的。我们必须给其足够的信任。他们可以说出不同于工程师的语言,大多时候工程师说的语言都比较晦涩。我们可以比工程师做的更好。

我是一个前端构架师,我如何将此介绍给我的团队

作为架构师,你应该写结构对象;创造如何设计圆角,定义四个角的呈现方式和其它的特点,并处理浏览器的兼容问题。新手写这些模块的皮肤(边框,颜色,背景图片等)

我通过使用OOCSS的方法创建了一个大规模的网站(1000多个页面,百万计的访问者)。因为处理得当,它的扩展性良好,这就意味着当新手着手一个个性的组件时,它能对其有相对准确的预期。Code review 也相对更容易,因为它们的规则更清晰,通过合适的方法扩展这些对象。这种反馈也让新的开发者的效率更高。

我在 FullSix(一家法国的网络市场机构) 负责一个前端开发团队,这些人是我所遇到一起工作的的最后天赋的同事。从某些方面说我们的成功是我们可以处理更多工作内容。雇佣专家级的前端是很困难的(这里并没有培训这些家伙的学校!)。因此我们开始对那些对代码领域感兴趣的设计师的内部培训internal internship program where designers who were interested in exploring code,这些人以前并没有类似的工作经验,这些人一个月之后成为我们团队中的高级人员。

  1. 第一周:他们了解语义和根据已有的css创建HTML。学习在不增加CSS的情况下创建新的页面,HTML 语法,多重样式,验证,语义化,学会代码审核,等
  2. 第二周:他们用一周的时间创建基本的内容对象(标题,列表,等等)。学习CSS语法,如何让扩展对象,颜色,文字大小等。
  3. 第三周:他们创建皮肤块。边框、颜色、背景图片,基本的定位,图片拼合技术。他们和高级工程师一起工作,这些工程师为他们解答那成吨的问题,这样就大大的降低了学习曲线。高级工程师也能同时带领他们成为一个有才华的代码审核者。
  4. 第四周:他们成为一名我们线上产品工程师中的一员,在生产环境下创建皮肤。

他们的代码在客户的线上网站上,看上去和高级工程师写的一样好,或者说更好,因为他们没有那些坏习惯。

我如何使用那些文件开始我的工作

这里有三个文件,libraries.css(重置和字体来源于YUI),grids.css 和 template.css 是需要准备好的,其它的还不确定。

  1. 下载整个项目通过下载按钮
  2. 打开 tempalte.html 并另存为新文件。
  3. 通过扩展这些对象使列宽适合。对你的网站来说你只需要一个tempalte,即使你有一些页面的列数是不一样的,因为列和其它东西一样也是对象。你可以把它们当成是可选区域,你可能需要0到多列左栏。获得更多信息请查看模板文档说明。
  4. 使用栅格来将内容区域分割成更小的片段。更多信息查看关于栅格的文档说明。
  5. 增加内容,注意,这也是使用OO思想。
  6. 拷贝和粘贴模块和对话框,对其增加内容
  7. 创建新的模块样式基于“mod_skin.css”。

我如何对线上已有的项目应用这种方法?

需要注意的是css仍然是在进展中的,根据反馈的信息我可能会做出调整。

我将css文件分割成 grids 和 模板。在真实的网站中你可能需要减少不要的内容来减少HTTP请求,否则网站将会变的很慢。这就意味着你需要将多个CSS文件拼合成一个大文件。我曾经使用嵌入评论,来保持css的组织性。最终上线的时候我会通过压缩/部署流程来移除评论内容。

我能编辑这些文件,或者通过我自己的样式覆盖它们吗?

我不会编辑grids,模板或者库文件,因为有太多的东西和它们有关系。如果你想定制他们,考虑一下使用扩展对象的方法吧extending the basic objects

粉色不是我想要的颜色!对 content.css 我能做什么?

你可能非常希望能编辑 content.css。或者更多的内容如颜色、文字大小、大写等。请记住这个文件更新很快,而且没有文档告诉你什么是对的,我现在正在做这一块。

未完待续

关于像素的是是非非

注:这是一篇两年前的文章,现在看来依然能给大家带来不少启发,作者做预期的方案已经开始广泛实施。文中有些地方翻译的有失准确,见谅。

我现在在研究扩浏览器手机设备的宽高方面搞的我焦头烂额,但是我可以声明这些硬件的变化,99%的和网页开发没有任何关系。

但是剩下的这1%就变得更棘手了,我希望苹果能通过增加一个中间像素层来解决这个问题。(后面John pointed out 指出这个中间层在 Android 系统下早就存在了。)

在我们开始之前我必须做一个说明:因为这些东西对网页开发人员并不是那么重要,因此我大多数情况会忽略掉正式的屏幕尺寸,同时我也没有真正的去研究关于显示、像素密度和其它负责的理念。因此我可能会使用了错误的专业术语,对此先道歉。

网页开发工程师需要啥?

我知道网页开发工程师所关心的,他们需要像素(pixels).也就是说,他们需要“pixels”让他们可以在css声明中使用 如 width: 300px or font-size: 14px.

这些像素值和实际的设备像素密度没有一点关系,甚至和传闻中的中间层也没有任何关系。对网页设计是来说,它们是一个基本的抽象的结构。

如果我们通过缩放来解析这个东西,可能会更容易理解。如果用户放大,一个有 width:300px 的元素将会在屏幕中越来越大。如果我们用设备的(物理的)像素来测量的话,它也会变的越来越大,根据需要通过放大的作用我们可以通过扩展css 像素的大小。

当缩放比例刚好是100%的时候,一个css 像素等于1个设备像素(因此传闻中的中间层的像素值将和替代设备像素值)。下面的图片描述了这种情况,我们看不到多出来的东西,因为css的一个像素刚好覆盖了一个设备像素。


(我必须提醒你的是,放大到100%在web开发中的意义并没有意义。放大级别对我们来说不重要,我们需要的仅仅是我们当前的显示器多少像素最合适。)

下面的两幅图谱阿布描述了用户使用放大功能时的情形。第一幅图像表现当用户缩小时,设备的像素点(深蓝色背景)和CSS像素(半透明的前景)。CSS中定义的像素变的更小,一个设备像素包含多个CSS像素。第二幅图像展示了当用户放大的时候,设备像素和css像素之间的关系。现在一个CSS像素覆盖在多个设备像素上面。

因此,我们用CSS定义的一个宽度为300像素的元素它的宽度任何时候都等于300像素,一个像素等于多少设备像素值取决于我们放大的程度。

(你可以通过使用 screen.width 除以 window.innerWidth 得出这个系数。 目前浏览器的不兼容还是挺普遍的;期待在不久的将来有个相对全面的报告。另外,作为网页开发人员你也不会关心放大系数,而仅仅关心多少像素(设备的或者CSS的)才能适应设备屏幕)。

这套系统并没有改变,否则,所有针对iPhone 优化过的站点将立刻变成没有优化过的,这也是苹果要不惜一切代价避免的。

因此,一个即使是放大到最大程度的网站依然显示980 CSS 像素的原因,我们也不会关注有多少设备的像素和它刚好合适,这对我们并不重要

最棘手的问题

这里有两个棘手的问题:device-width 的媒体查询技术 和 <meta name=”viewport” width=”device-width” >标签。这两个都是基于设备 像素的,而不是 CSS 像素,因为他们报告的是页面的内容,而不是CSS生效的内容。

媒体介质查询

device-width 媒体查询测量的设备宽度使用的是设备本身的像素值。width 的媒体查询技术测量的是页面中CSS定义的页面像素值,在iPhone 上面,这个值最少是980px像素,这个我将在后面给大家解释。

device-width 媒体查询技术的工作流程是下面的样子:


div.sidebar {
width: 300px;
}

@media all and (max-device-width: 320px) {
// styles assigned when device width is smaller than 320px;
div.sidebar {
width: 100px;
}

}

现在边栏(siderbar)的宽度是css定义的300像素,除非设备的宽度等于或小于320像素,在这种情况下它才能变成100 CSS像素宽度。(如果你继续看下去,这个将变得很复杂。)

顺便提一下,从理论上来说你可以通过厘米或者英尺来应用媒体查询技术(@media all and (max-device-width: 9cm)。但是不幸的是好像并不被完全的支持,甚至是iPhone 设备。原因是物理单位类似于英尺一般会被转换成(css)像素,我在所有浏览器上测试,绝大多数情况 width:1in 等于96像素。因此这些媒体查询并不可靠。

<tag>标签

通常情况下,<meta name=”viewport” width=”device-width”>更有用。这个属性,最初是苹果设备的专用属性,但是现在被越来越多的浏览器所支持,使视窗布局和设备完全匹配。

那么什么是视窗布局呢?这是一个区域(使用CSS像素),浏览器通过使用百分比的方式计算元素的尺寸,比如 div.siderbaer{width:20%}.一般情况下在iPhone设备上会比设备的屏幕980像素大一些,Opera 850像素,Android 800 像素,等。


如果你增加了 <a name=”viewport” width=”device-width”>,视窗的布局将会被限制在设备像素宽度内;在iPhone 设备下是320像素。

如果你的页面足够窄来适应屏幕。将页面CSS中的 width 声明全部去掉和不使用 <meta> 标签。这样就能将内容延伸到适应整个视窗宽度的页面。

这可能并不是你要的结果。你期望文本能完美的适应屏幕,那这就是 <meta name=”viewport” width=”device-width”> 了。当你把它加进去的时候,页面的视窗布局就会伸缩(在iPhone下到 320px),这样子文本就能适应了。


苹果的改变

当苹果分辨率变化时会对 device-width 媒体查询 和 meta 标签产生影响吗?当然我还不能确定,但是我希望对页面开发没有任何变化。

meta 标签

meta 标签方面最容易解释。Apple 专门发明它,为了让用户在iPhone 上的内容呈现更精准,并不遗余力的推广给开发者。这也意味着通过 <meta> 标签读出的设备宽度不会改变。

事实上, Nexus One 是Apple的开路先锋。它的官方屏幕宽度(在竖屏下)是480px,但是当你部署 <meta>时,它会吧屏幕宽度定义为 320px,是官方宽度的 2/3。

如果我理解的正确,这就是 John Gruber 讨论的talking about Nexus 的显示和它会丢失额外的一像素,这就导致了比实际像素数少了 1/3.这样子就使 Nexus 得到的<meta>准确。

从基本上说 Google 已经增加了一个被称为dips的层;device-independent pixels。这个层来自于官方,被称为屏幕尺寸和网站开发者使用的CSS像素。

应此我希望新的iPhone也使用 Nexus 的方法,当我们使用<meta>标签媒体查询将屏幕尺寸汇报为320px(也就说是正式分辨率的一半)。它将是一半而不是2/3,因为新iPhone的像素密度比Nexus 高更多。

媒体查询

这样就剩下 dveice-width 媒体查询成了一个唯一的问题区域。当Nexus使用480px作为屏幕宽度的时候,事实也证明320像素可能更合适。我们将会看看Apple在这方面怎么做。

另一个重要的问题是,是否把中间层(dips)也作为媒体查询的一个条件。总体上我希望是这样,事实的设备宽度对网页开发人员来说并不重要,我们希望知道我们能在屏幕上呈现多少内容,dips 中间层看起来更能适应这个要求。

不幸的是,Nexus 现在并不支持,目前媒体查询技术还仅仅关注 device-width 仍然是480px,而不是 320px。但是可能 Apple 能为网页开发者解决这个问题。

因此现在的情况对普通网站和使用 <meta>就比较明朗了;当使用媒体查询的时候,问题就变的复杂了。

让我们拭目以待。

中文原文:关于像素的是是非非
英文原文:A pixel is not a pixel is not a pixel
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

使用CSS3媒体查询技术创造响应式设计

显示器的分辨率的范围越来越宽泛了,从苹果的 320px(iphone)到 2560px(大显示器其)甚至更大。用户浏览网页的的设备也不仅仅是桌面电脑了。现在用户使用手机,上网本,平板电脑设备如iPad 或者 Playbook 等来登录网站。因此传统的固定宽度的设计的方法将不再适用。网页设计需要更广的适应性。布局需要能自动适应的分辨率和解析设备。下面的教程将会大家展示如何通过HTML5和 css3 的媒体介质查询技术 创建跨浏览器的响应式设计,

View Demo Responsive Design

Download Demo ZIP

看效果先

在我们开始之前,先让我们看看最终的效果final demo。缩放你的浏览器来看其布局的基于视窗的变化。

overview

更多的例子

If you want to see more examples, check out the following WordPress themes that I designed with media queries: Tisa, Elemin, Suco, iTheme2, Funki, Minblr, and Wumblr.

概要

页面容器的宽度为980px,这样的宽度对分辨率大于1024px的设备来说是比较合适的。媒体介质查询技术将会检测视窗是不是小于980像素的宽度,然后布局将会从固定宽度的布局转换成流动布局(fluid width)。当视窗小于650px时,将会扩展内容容器和边栏为全部宽度时期成为单独一列布局。

overview

HTML 代码

在这里我就不赘述HTML代码了。下面就是主要的布局结构。这里有一个 “pagewrap” 容器,包含 “header”,“content”,“siderbar”和“footer”。

<div id="pagewrap">

	<header id="header">

		<hgroup>
			<h1 id="site-logo">Demo</h1>
			<h2 id="site-description">Site Description</h2>
		</hgroup>

		<nav>
			<ul id="main-nav">
				<li><a href="#">Home</a></li>
			</ul>
		</nav>

		<form id="searchform">
			<input type="search">
		</form>

	</header>
	
	<div id="content">

		<article class="post">
			blog post
		</article>

	</div>
	
	<aside id="sidebar">

		<section class="widget">
			 widget
		</section>
						
	</aside>

	<footer id="footer">
		footer
	</footer>
	
</div>

HTML5.js

请注意我在例子中使用了html5标签。IE9一下的浏览器将不支持这些标签元素,比如<header;><article;><footer;><figure;>等等。包含 html5.js 文件将会是这些浏览器明白这些新元素。

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

CSS

将新HTML5元素初始化为块元素

下面的css代码将会初始化HTML5元素为块元素(article, aside, figure, header, footer, etc.)。

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

主结构CSS

和上面一样,这里就不再赘述css的细节了。主“pagewrap”容器的宽度是980px,头部设置一个固定的高度160px。“content”容器设置为600px并且左浮动,“sidebar”容器280px宽右浮动。

#pagewrap {
	width: 980px;
	margin: 0 auto;
}

#header {
	height: 160px;
}

#content {
	width: 600px;
	float: left;
}

#sidebar {
	width: 280px;
	float: right;
}

#footer {
	clear: both;
}

Demo

下面就是设计的例子。请注意媒体查询技术还没有被使用。当你缩放浏览器窗口是,你将看不到布局的缩放。

css3 媒体查询那些事

下面就到了最有意思的地方-媒体介质查询media queries

引入媒体查询javascript库

IE8和更老的浏览器不支持css3的媒体查询。你可以通过加入css3-mediaqueries.js 让其在这些低版本的浏览器中生效。

<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

加入媒体查询

为媒体查询创建一个新的样式表文件。请查看我的上一篇教程,了解如何使用媒体查询技术media queries

<link href="media-queries.css" rel="stylesheet" type="text/css">

小于980px的视窗是使用流布局(Fluid Layout)

小于980px的视窗时,下面的规则生效:

  • pagewrap = reset width to 95%
  • content = reset width to 60%
  • sidebar = reset width to 30%

技巧:使用百分比的值,让其容器自适应。

@media screen and (max-width: 980px) {

	#pagewrap {
		width: 95%;
	}

	#content {
		width: 60%;
		padding: 3% 4%;
	}

	#sidebar {
		width: 30%;
	}
	#sidebar .widget {
		padding: 8% 7%;
		margin-bottom: 10px;
	}

}

视窗小于650px时(一列布局)

接下来,我们创建另一个css文件,应用于视窗小于650px的时候。

  • header = 将高度重置为 auto
  • searchform = 重新定位搜索表单,将其放在距顶5像素的位置。
  • main-nav = 将其位置重置为static
  • site-logo = 将其位置重置为static
  • site-description = 将其位置重置为static
  • content = 将其宽度重置为auto (这样可以将其容器扩展到整个宽度) 并且去掉浮动
  • sidebar = 将宽度重置为100%并且清除浮动。
@media screen and (max-width: 650px) {

	#header {
		height: auto;
	}

	#searchform {
		position: absolute;
		top: 5px;
		right: 0;
	}

	#main-nav {
		position: static;
	}

	#site-logo {
		margin: 15px 100px 5px 0;
		position: static;
	}

	#site-description {
		margin: 0 0 15px;
		position: static;
	}

	#content {
		width: auto;
		float: none;
		margin: 20px 0;
	}

	#sidebar {
		width: 100%;
		float: none;
		margin: 0;
	}

}

视窗小于480px时

下面的样式将会应用于视窗最大为480时,这个宽度刚好是Iphone竖屏时的宽度。

  • html = 取消文字大小调整功能。通常,iPhone将会将文字变大,以便于更方便阅读。你可以将这个属性关闭通过增加-webkit-text-size-adjust: none 的方法.
  • main-nav = 将其文字的大小调整为90%
@media screen and (max-width: 480px) {

	html {
		-webkit-text-size-adjust: none;
	}

	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;
	}

}

灵活的图像

为了使图片更灵活,我们可以简单的增加 max-width:100% 和 height:auto 属性。图像 max-width:100% 和 height:auto 在IE7中能很好的工作,但是在IE8中却不可以(这确实是IE的Bug)。为了修复这个问题,你可能需要增加 width:auto\9 来针对IE8 hack。

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

灵活的嵌入视频

为了让嵌入的视频更灵活,我们也会使用上面的技巧。因为未知的原因,max-width:100%(针对嵌入的元素)并不被Safari所支持。在这方面我们可以用 width:100% 来替代。

.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}

初始化meta标签

通常,iPhone Safari 浏览器会缩放HTML页面来适应iPhone的屏幕。下面的 meta 标签将会告诉iPhone Safari 浏览器去使用设备的宽度来作为视窗的宽度,而不去初始的缩放。

<meta name="viewport" content="width=device-width; initial-scale=1.0">

最终效果

final demo

查看最终效果,然后缩放你的浏览器看效果。别忘记在iPhone,iPad,Blackberry上面查看效果,使用 Android 手机查看移动版本。

总结

1.媒体查询技术的向后兼容

css3-mediaqueries.js 能够使不支持媒体查询技术的浏览器支持这种技术。

<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

媒体介质查询技术

通过使用css根据视窗宽度来覆盖布局结构,创造出响应式设计的技巧。

@media screen and (max-width: 560px) {

	#content {
		width: auto;
		float: none;
	}

	#sidebar {
		width: 100%;
		float: none;
	}

}

灵活的图片

使用 max-width:100% 和 height:auto 来使图片更灵活。

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

灵活的嵌入媒体

使用 width:100% 和 height:auto 使嵌入的视频更灵活。

.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}

Webkit 浏览器文本缩放:

使用 -webkit-text-size-adjust:none 禁用iPhone 浏览器的文本缩放功能。

html {
	-webkit-text-size-adjust: none;
}
重置 iPhone 视窗 和 初始缩放

下面的meta标签将会在iPhone重置视窗和初始缩放:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

中文原文:使用CSS3媒体查询技术创造响应式设计
英文原文:Responsive Design with CSS3 Media Queries
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

再谈css媒体介质查询技术

以前谈论过的东东:CSS3 媒体查询 视频教程

css3 增强了媒体样式表的支持,让样式表更精准。一个媒体介质查询有媒体类型和至少一个媒体特点表达式组成,比如宽、高、和颜色等。媒体介质查询可以在不改变内容的前提下,根据输出设备的范围,精准的呈现。

语法

媒体查询有媒体类型和一个或多个表达式组成,包括媒体特性,这样就组成了一个 真 或 假 的表达式。如果媒体查询语句中的媒体类型和媒体特性都匹配的话,结果及为真。

如果媒体查询的结果为真,形影的样本规则生效。

如果媒体查询中 既没有使用 not 也没有使用 only, 媒体类型也是可选的,这样将会被认为是 all.

逻辑操作符

你可以通过使用逻辑操作符,包括 notandonly 组成复杂的媒体查询。

同时,你可以使用多重媒体查询,将其用逗号分隔,组成一个媒体查询表,如果在一组查询中,有一个查询的结果为真,那么相关联的样式表就会生效。这相当于逻辑操作符or

关键字 not 将会与媒体查询结果相反;比如,“all and (not color)” 因为媒体类型其将只在黑白的访问设备上显示。

我们可以使用 only 关键字来针对不支持媒体查询技术的老浏览器隐藏相应的样式:

		<link rel="stylesheet" media="only screen and (color)" href="example.css" />
		

操作符优先级

操作符 not的优先级很低。比如,在下面的代码中,not会被最后计算:

		@media not all and (-moz-windows-compositor) { ... }
		

这就意味着,这条查询语句的结果和下面一样:

		@media not (all and (-moz-windows-compositor)) { ... }
		

或者这样:

			@media (not all) and (-moz-windows-compositor) { ... }
			

像另一个例子,请看下面的查询语句:

		@media not screen and (color), print and (color)
		[/css]
		</p>
		<p>
		它等于下面的语句:
		
		@media (not (screen and (color))), print and (color)
		

Pseudo-BNF(你喜欢的那些事情)

		media_query_list:  [,  ]*
		media_query: [[only | not]?  [ and  ]*]
		  |  [ and  ]*
		expression: (  [: ]? )
		media_type: all | aural | braille | handheld | print |
		  projection | screen | tty | tv | embossed
		media_feature: width | min-width | max-width
		  | height | min-height | max-height
		  | device-width | min-device-width | max-device-width
		  | device-height | min-device-height | max-device-height
		  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
		  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
		  | color | min-color | max-color
		  | color-index | min-color-index | max-color-index
		  | monochrome | min-monochrome | max-monochrome
		  | resolution | min-resolution | max-resolution
		  | scan | grid
		  

需要注意的是,媒体查询语句对大小写是敏感的,如果使用了未知的媒体类型,这个查询的结果将总是假。

注意,媒体查询的表达式必须用括号;否则将会产生错误。

媒体特点

大多数媒体特点将会加上一个前缀“min-” 或者 "max-" 来表示“大于或等于” 或者 “小于或等于”的限制条件。这里禁止使用 ">" 或者 "<" 符合,因为这样将会和 html 或者 XML 文档相冲突。如果你的媒体特点没有定义值,如果媒体特点的值非零,那么这个表达式的结果将会是真。

注意:如果媒体特点在设备运行的浏览器上不支持,表达式的结果总是假。例如,媒体查询的款高比率在盲人设备上结果总是假。

颜色

Value:
<color>
Media:
visual
Accepts min/max prefixes:
yes

表示输出设备的每种色彩的位数。如果设备不是彩色的设备,那么这个值将总是0.

如果出处设备的每种颜色组成的位数不同,将会使用最小的值。例如,如果蓝色使用5位,绿色使用6位,那么设备将会使用5位。如果设备使用索引色,每种颜色的在颜色表中的最小位数将会被使用。

例子

对所有彩色设备使用样式表:

@media all and (color) { ... }

针对最少4位颜色的设备使用样式表:

			@media all and (min-color: 4) { ... }
			

颜色索引

Value: <integer>
Media: visual
Accepts min/max prefixes: yes

根据设备输出的颜色表来匹配。

例子

对所有彩色设备使用样式表:

@media all and (color-index) { ... }

针对至少有256索引色的设备使用下面的样式表:

		<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
		

宽高比

Value: <ratio>
Media: visual , tactile
Accepts min/max prefixes: yes

用来描述输出设备的目标显示区域的宽高比。这个值由两个正值,并通过“/”分开。这将会表现水平(第一个值)和垂直(第二个值)的比率。

		@media screen and (min-aspect-ratio: 1/1) { ... }
		

这样将会在比率大于1:1的显示区域中应用样式。

设备宽高比

Value: <ratio>
Media: visual , tactile
Accepts min/max prefixes: yes

用来描述输出设备的款高比。这个值由两个正值,并通过“/”分开。这将会表现水平(第一个值)和垂直(第二个值)的比率。

例子

下面的语句将会针对宽屏显示器显示:

		@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
		

上面的语句将会在比率为 19:9 或者 16:10 的设备中使用相应的样式。

设备高度

Value: <length<
Media: visual , tactile
Accepts min/max prefixes: yes

描述输出设备的高度(整个屏幕或者页面,而不仅仅是渲染的区域,类似于整个文档窗口)。

例子

当屏幕的宽度小于800像素是,应用样式:

		<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
		

设备宽度(device-width)

Value: <length<
Media: visual , tactile
Accepts min/max prefixes: yes

描述输出设备的宽度(整个屏幕或者页面,而不仅仅是渲染的区域,类似于整个文档窗口)。

grid

Value: <integer>
Media: all
Accepts min/max prefixes: no

检索输出设备是否为网格设备(grid device)或者位图装置(bitmap device),如果是基于栅格的设备,(如 TTY 终端 或者只有一种字体的手机),这个属性值将会是1,否则为0;

例子

下面的代码将在只能显示15个字或者更少的手持设备上显示:

		@media handheld and (grid) and (max-width: 15em) { ... }
		

注意:“em”单位对栅格设备有特殊的意义;因为“em”不可能被定义为绝对的宽度,1em 被假设为横向宽度/纵向高度为一个单元的格子。

高度(height)

Value: <length>
Media: visual , tactile
Accepts min/max prefixes: yes

height媒体特点描述了输出设备的可视区域(及页面的可视区域或者分页介质的高度)。

注意:当用户改变窗口大小时,firefox会基于媒体介质查询,通过高度和宽度的特点,来转换相应的样式表。

单色显示(monochrome)

Value: <integer>
Media: visual
Accepts min/max prefixes: yes

该属性表示每个像素的bit数。如果设备不是单色,那这个设备的属性值是0.

例子

下面的样式将会被应用到所有单色设备

		@media all and (monochrome) { ... }
		

将样式表运用在至少每个像素点有8bits 的单色设备上:

		@media all and (min-monochrome: 8) { ... }
		

方向(orientation)

Value: landscape | portrait
Media: visual
Accepts min/max prefixes: no

用来确定设备的显示模式是横屏(显示的宽度大于高度)还是竖屏(显示的高度大于宽度)

例子

针对竖屏显示的样式表:

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

分辨率(resolution)

Value: <resolution>
Media: bitmap
Accepts min/max prefixes: yes

用来表示输出设备的分辨率(像素密度)。像素可能会被定义为一英尺有多少个点(dpi)或者一厘米有多少个点(dpcm)。

例子

下面的代码表示将会对分辨率大于每英尺大于300点的设备应用样式:

		@media print and (min-resolution: 300dpi) { ... }
		

扫描(scan)

Value: progressive | interlace
Media: tv
Accepts min/max prefixes: no

用来定义电视输出设备的扫描方式。

例子

下面的代码将会被用在隔行扫描的电视设备上面:

		@media tv and (scan: progressive) { ... }
		

宽度(width)

Value: <length>
Media: visual , tactile
Accepts min/max prefixes: yes
width媒体夜店用来描述输出设备的渲染的区域(如文档窗口的宽度,或者打印机的页面宽度)。

注意:当用户改变窗口大小时,firefox会基于媒体介质查询,通过高度和宽度的特点,来转换相应的样式表。

例子

如果你想针对手持设备或者显设备的宽度大于20em时,你可以使用下面的语句:

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

下面的媒体查询语句将针对打印媒体的宽度大于8.5英尺时使用:

		<link rel="stylesheet" media="print and (min-width: 8.5in)"
    href="http://foo.com/mystyle.css" />
		

下面的样式表将在可视区域的宽度介于500 和 800 像素之间时使用:

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

Mozilla 定义的媒体特点

Value: <number>
Media: visual
Accepts min/max prefixes: yes

每个css像素在设备中占用的像素点。

注意:这个媒体特点在 webkit 的浏览器中也有对应 -webkit-device-pixel-ratio.在 Gecko 浏览器中,最大最小值被用下面的方式命名 min--moz-device-pixel-ratio 和 max--moz-device-pixel-ratio ,但是在 webkkit 内核中,是下面的样子 -webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio

此处请阅读原文,我们仅仅介绍一下 -moz-device-pixel-ratio

-moz-device-pixel-ratio

浏览器兼容性

桌面设备

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 3.5 (1.9.1) 9.0 9.5 4
grid ? -- (grid media type is not supported) ? ? ?
resolution ? 3.5 (1.9.1)
supports <integer>
values;
8.0 (8.0)
supports <number>
values, as per the spec.
? ? ?
scan ? -- (tv media type is not supported) ? ? ?

移动设备

Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) ? (Yes) (Yes)

原文地址:CSS media queries

关于iPad3 和媒体查询技术的几点看法

移动和非移动的设备间的界限越来越模糊了,我们有平板电脑和上网本,他们介于手机和桌面电脑之间,甚至我们使用其他的设备,比如游戏机来浏览网页,这些设备有不同的屏幕尺寸,分辨率和像素密度.现在Ipad3 来了,在这块 9.7 英尺的的屏幕上,拥有比大多数桌面显示器更高的像素点。在这么多屏幕尺寸不同的设备上显示网站而不去为移动版本写单独样式的方法就是使用css媒体介质查询技术,特别是 min-device-width and max-device-width 查询技术。

尽管如此,min-device-width and max-device-width 无法分辨ipad2 和Ipad3,因为Ipad3和Ipad2给出的分辨率依旧是 1024X768, 就像在iPhone4中使用的媒体查询技术一样得到的结果和iPhone 3GS 一样。产生这样的结果的原因是比较容易理解的,因为他们的屏幕尺寸是一样的。如果Ipad3报出了准确的分辨率,网站针对 Ipad2作出的优化将会把Ipad 3当成台式电脑的处理器来处理。此外,如果没有可以宽展的样式来讲特定的尺寸加倍,大多数网站将不可阅读。来将其与其他设备分辩开来的方案就是使用媒体介质查询的 -webkit-device-pixel-ratio,如果属性值为 2 ,将被使用在视网膜显示技术的设备上,也就是 iPad3 或者 iPhone4+.如果值是1,将会被认为是普通屏幕,因为只有某些webkit浏览器支持此属性,你可以认为2将会覆盖默认的属性1.

绝大多数桌面显示器我们都假设为 72ppi(每英尺的像素点),也就是说一个288像素宽的图片将会占据屏幕4英尺的空间。但是在 iPad3 原生的解析度(264ppi),相同的图片仅仅是1英尺的宽度。因此,除非我们特别告知,视网膜显示屏技术将会使呈现的像素点数量增加一倍,这将会使文字非常的清晰和锐利,因为它使用了两倍的像素点。但是在图片方面,视网膜显示技术的优势如果仅仅是将分辨率提高一倍的话就没有了。如果将你的图片在iPad3上的的尺寸提高一倍,你的图片也会像文字一样锐利和清晰。缺点是你现在你的图片使用了四倍的像素(两倍的高和宽),图片也会更大,使用更长时间的加载时间。更优的质量和更快的速度之间你要做一个权衡。

在某些情况下,你有必要为移动版本单独开发做开发。是否需要做这些取决于你和每个项目的特点。但是另一方面,必须明白的将开发分为移动版本和非移动版本是局限的。iPad(包括其他平板电脑)拥有移动设备的特点,但是它们的屏幕尺寸相比手机能适应更多的网站。除了移动版本和非移动版本之外,你还需要考虑是不是需要一个专门给平板电脑访问的特殊版本。通过使用媒体查询技术,你可以适应这些不同的屏幕分辨率,同时这也很有前瞻性。

我认为大多数网站都是单一的一个可以快速访问的版本,媒体介质查查询技术使其可以在不同的平台良好的工作。但是我们也必须意识到它并不是唯一的技术。基于媒体介质查询使用轻量级的js库同样可以应对多重图像分辨率的问题,或者通过background-image属性为小屏幕的提供不同的图像,防止加载的过大的图像。必须要注意一些设备,特别是iPhone,对隐藏的元素也加载背景图片,因此隐藏元素的方法来阻值加载背景图片是无效的。事实上,定义一个默认的背景图片,然后通过媒体介质查询技术将其默认的图像覆盖,但这将会导致加载两次图像。产生不同背景的两个背景图像的方法也是使用媒体产介质查询技术。一个使用 max-device-width 另一个使用 min-device-width。

如果你的网站使用单一的版本来适应所有的设备,那你肯定能够不想重复加载,特别是针对那些小设备。如果我们从一个较小的版本开始,然后渐进增强将是一个很好的方法。如果处理得当,我们的而外好住那就是如果不支持媒体产讯的设备将会得到一个较小的版本。像前面提到的需要关注图片的问题一样,其它用到的资源你也必须记住。比如,你有一个比较大的js库来处理一些高级的技术,但是这些高级技术你并不希望在显示给手机端用户,那么加载这个大而没有效果的js库是没意义的,那就需要使用一个小的javascript解决方案,用它来判断是不是需要加载这些大的库。甚至额外的HTML也会导致页面膨胀,如果你的网站有很大比例的内容内容是对移动端用户隐藏的,你就需要将其分成多个版本,或者使用aJax技术只在桌面端显示这些部分。对于这些小屏幕的用户,除了要考虑他们的屏幕因素外,这些设备通常在处理器和内存方面的处理能力也有限,更经常会有一些连接上的局限。为他们提供服务时也需要把这些因素考虑在内。

中文原文:关于iPad3 和媒体查询技术的几点看法
英文原文:Thoughts on Media Queries and the iPad 3
转载请注明以上信息,以表示对作者和译者的尊重,多谢!