五列均分的简易实现方法

项目中需要五列均分,每个间隔两个像素的效果,查了一些资料,比如 box-flex,自己找了一个最简单的解决方法,实现一下,其实最后一列是大了两个像素。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
.wrap{width:auto;height:50px;background:#000;}
.wrap ul{width:auto;}
.wrap ul li{float:left;position:relative;height:2px;width:20%;list-style:none;overflow:hidden;}
.wrap ul li:after{content:'';position:absolute;left:-2px;top:0;width:100%;height:2px;background:#FC0;}
.wrap ul li:last-child:after{left:0;}
</style>
</head>

<body>
<div class="wrap">
	<ul>
    	<li></li><li></li><li></li><li></li><li></li>
    </ul>
</div>
</body>
</html>

做一个 pad 的登录浮层用到的东东

虽说是一个很小的东西,但是使用到的东西还真不少。
1. 首先你要在你的静态页面中指定 viewport 的东西,要不然,他是自己缩放的,你根本不知道它的大小。

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

2. 占位文字(placeholder)的 css 定义

.sos-pad-login ::-webkit-input-placeholder { color:#d2d2d2;font-size:20px;}

3. 输入框 focus 的时候,黄色框的问题

.sos-pad-login .ipt:focus{color:#333;border:1px solid #b5b5b5; outline:none;}

4. 去掉 ios 设备上,输入框的圆角效果

.sos-pad-login input{border:1px solid #d2d2d2;width:391px;height:42px;padding-left:14px; line-height:42px;font-size:20px;-webkit-appearance:none; border-radius:0;}

5. 当然如果用到了图片的背景图片的话,那就考虑一下双倍图的问题吧

@media screen and (-webkit-device-pixel-ratio: 2){
	.sos-pad-login .btn-cls,
	.sos-pad-login .btn-rfsh{ background-image:url(../images/sos_login_icon_tw.png);background-size:34px 80px;}
	}

6. 对input type=”text” 定义行高,会导致 placeholder 无法垂直居中,所以就不要定高度了

input {line-height:auto}

用 rem 单位定义文本大小

使用什么单位定义文字大小依然是一个比较有争议的地方,即使在此时此刻。不幸的是,在众多的提议和方法中,技术层面上并不理想。我们期望的是一个理想的解决方案。

这里有两个主要的技术方案:
1.尺寸使用 px
2.尺寸使用 em

在我们披露第三项技术之前,让我们先来回顾一下过去的两种实现方案

使用 px 定义尺寸

在互联网发展的早期阶段,我们使用像素去定义文本的大小尺寸。这种方法比较可靠,并且表现一致。不幸的是,当用户使用 IE 浏览器的时候(即使使用的是IE9),用户无法通过浏览器自带的功能去增大或者改小文字的大小。这些东西关系到你的网站可访问性,这可是大事。IE最近的版本拥有放大功能,它可以将页面上的所有内容扩大,这个特点在其他主流的浏览器中也有。这个功能使IE的可访问性的问题减少了。

就我个人而言,我曾经是 基于像素布局的拥堵,它能够提供一致的表现,用户有多种工具去调整视图,来提升他们的可访问性。除此之外,我们还能做什么?

使用 em 定义大小

在IE中调整文字的大小功能缺失依然是个缺陷。围绕这个问题,我们可以使用 em 单位。Richard Rutter 的文章 How to size text using ems,是我读到的最早关于此的文章,那是在2004年。

这种技术方案通过在 body 标签上通过百分比的方式改变基础文字尺寸。这种方法让让我们有一个基准,1em等于10像素,来替换掉默认的 1em 等于16像素。为了能让正文的文字大小是 14像素,我们需要将其设置为 1.4em。

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */

这种基于 em 的文字计算方式是很繁琐的,我们有没有更好的方法?

使用 rem 定义尺寸

CSS3引入了一些新的单位,包括 rem 单位,它代表的是 “root em”(基础em)。看到这里,你如果依然感兴趣,让我们看看 em 标签是如何工作的。

em 单位是相对其父元素的 font-size,这就导致了其再次计算的问题。rem 标签是相对于其根的 或者 为其 html 标签。这样就意味着我们可以在 html 标签上定义一个单独的百分比尺寸,然后其它的单位都会基于此来计算。

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

我定义了一个基准的文字尺寸 62.5%,让我们的计算更加方便,就像我们使用 px 定义那样。

但是浏览器支持的情况我们是不是要去考虑一下呢?

你可能比较奇怪,浏览器对这个新单位的支持还是很不错的:Safari 5, Chrome, Firefox 3.6+,甚至 IE9都支持这个新单位,更可喜的是IE9通过使用rem单位可以支持重新定义大小。(同时要指出的是 Opera(至少在版本11.10)都没有支持这个属性单位)。

我们对不支持 rem 的浏览器如何做兼容处理呢?我们可以通过使用 px 向后兼容,如果你不介意用户对旧的IE浏览器版本重置文本大小(在 IE7 和 IE8 中依然有缩放整个页面的功能)。为了达到这个目的,我们会先用 rem 定义文字大小,然后使用 px 单位重置前面定义的rem 单位。

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

现在,我们可以在所有的浏览器中保持精确一致的尺寸了,并且可以对文本在目前主要的浏览器中调整文字大小。

关于浮点数的计算方式,狠点”小数点单位的探讨“文章

原文地址:http://snook.ca/archives/html_and_css/font-size-with-rem

译文地址:http://varhi.com/?p=5629

Photoshop转css3工具

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

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

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

CSS3.0之text-shadow属性

CSS3.0的text shadwo属性已经出现一段时间了,下面就分享一下收集的关于text-shadow效果的使用案例!如果你仔细研究了这些,你必将对text-shadow有更加深入的了解。
text-shadow其语法包括投影X轴偏移、Y轴偏移、模糊参数以及投影颜色,看下图。

一、vintage 文字效果
效果:

代码:

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

学习要点:text-shadow通过同时设置多个投影效果实现

二、Neon 文字效果
效果:

代码:

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

学习要点:text-shadow保持x、y轴偏移不变,逐渐增大模糊参数的数值及变幻颜色实现。

三、Anaglyphic 文字效果
效果:

代码:

text-shadow: 8px 8px 0 rgba(255,0,180,0.5);

学习要点:text-shadow与rgba结合实现,颜色采用rgb的颜色格式Red (R)、Green (G)、Blue (B),a为透明程度opacity/alpha。

关于text-shadow的更多案例详见www.line25.com

关于像素的是是非非

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

我现在在研究扩浏览器手机设备的宽高方面搞的我焦头烂额,但是我可以声明这些硬件的变化,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
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

css3弹性盒子模型之box-flex(续)

二、box属性
上篇文章”css3弹性盒子模型之box-flex“将box-flex如何对父容器的宽度进行划分分配讲解完毕,下面在看一下父容器里面的box属性包括哪些box属性,具体属性如下代码所示:

box-orient | box-direction | box-align | box-pack | box-lines

Continue reading “css3弹性盒子模型之box-flex(续)”