CSS Media Queries 模板

标签: CSS3 HTML5/CSS3 | 发表时间:2012-04-22 19:23 | 作者:Rainbow
出处:http://blog.moocss.com

CSS Media Queries 模板

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/* 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 */
}

来点儿动画

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.main{
     width:800px;
     display:inline-block;
}
.sidebar{
     width:300px;
     display:inline-block;
}
 
/*Smartphones (portrait and landscape) ----------- */
@media only screen
	and (min-width : 320px)
	and (max-width : 480px) {
	.main{
		width:480px;
		/* webkit */
		-webkit-animation-property: -webkit-width;
		-webkit-animation-property: -webkit-height;
		-webkit-transition-duration: 3s;
 
		/* moz */
		-moz-animation-property: -moz-width;
		-moz-animation-property: -moz-height;
		-moz-transition-duration: 3s;
 
		/* opera */
		-o-animation-property: -o-width;
		-o-animation-property: -o-height;
		-o-transition-duration: 3s;
	}
	.sidebar{
		width:480px;
		/* webkit */
		-webkit-animation-property: -webkit-width;
		-webkit-animation-property: -webkit-height;
		-webkit-transition-duration: 3s;
 
		/* moz */
		-moz-animation-property: -moz-width;
		-moz-animation-property: -moz-height;
		-moz-transition-duration: 3s;
 
		/* opera */
		-o-animation-property: -o-width;
		-o-animation-property: -o-height;
		-o-transition-duration: 3s;
	}
}

相关日志 »

相关 [css media queries] 推荐:

CSS Media Queries 模板

- - blog.moocss.com
CSS Media Queries 模板. 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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60.

CSS4 Media Queries 新特性

- - 葵中剑's Blog - SwordAir.com
来自 css3.info 的消息,CSS4 Media Queries 已经成型,尽管它现在还只是一份 编辑草案,不过我们仍然可以从中看到新的 Media Queries 所具备的特质. 在 Changes Since the Media Queries Level 3 一节里,就能看到 CSS4 Media Queries 的新特性.

HTML5实践 -- CSS3 Media Queries

- - 博客园_首页
  转载请注明原创地址: http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html.   demo查看地址: http://www.webdesignerwall.com/demo/media-queries/.   CSS2允许你对特定media类型制定样式,例如针对屏幕或者打印机.

CSS3 Media Queries的些野史外传

- BeerBubble - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1049. //zxx:本文是去年2010年,也就是去年8月24号一篇写了一半的草稿,正好时隔1年. 一、关于Media Queries这货. 去年我在制作“CSS3中文在线指南”时第一次见到该属性,当时的兴奋劲堪比路飞看到肉(最近在看海贼王),原来世界上竟有这等CSS属性,因为当时很多精力用在思考自适应布局与宽屏显示器下的页面布局,见此属性立马让我眼前一亮,青春绽放.

伪类+js实现CSS3 media queries跨界准确判断

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2387. 我们都知道,CSS3 media queries是 响应布局实现之利器. 国外很多著名的前端站点,如 css-tricks, smashingmagazinegazine等都采用了响应布局.

CSS3 Media Queries在iPhone4和iPad上的运用

- - Web前端 - ITeye博客
那么以后大家在iPhone4和iPad设备上,就可以按照横竖板来定样式了:. 上面四种CSS3 Media Queries就是用来对付iPhone4和iPad的,至于其他的运用,大家参考下面我重新整理的CSS3 Media Queries模板:. CSS3 Media Queries 模板:. 1、Smartphones (竖板和横板).

CSS3 Media Queries 详细介绍与使用方法,Responsive Web Design 必备技术

- - Web前端 - ITeye博客
上一篇我们介绍了 Responsive Web Design之后,这次要来详细介绍CSS3 Media Queries了. 在上一篇中,我们提到 Responsive Web Desig n的实作方式有大半都是利用CSS3 Media Queries来达成. 而顾名思义Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支援.

ROI Media:反思网站设计

- - 中文互联网数据研究资讯中心
现在谁都可以轻松做一个网站,但根据ROI Media,只有4.13%的网站具备有效的HTML和CSS,更让人担忧的是只有40%的用户能在站点上找到他们需要的信息,这可能是用户自己的错,但也可能是由于糟糕的设计. Tencent CDC:工具型网站首页的设计思考. Hubspot:网站首页12大元素--信息图.

media query ie8- 兼容实现总结

- - UX 一淘体验中心
由于业务形态原因,随着用户分辨率的提高,1024x768已不再是主流,宽屏用户比例越来越大,因此我们的响应式考虑如何充分利用PC用户设备上更多空间而设计. 下图为淘宝用户的屏幕分辨率和浏览器比例,鉴于ie8-浏览器目前占比约70%,media query的ie8-兼容迫于现实还是要做……. media query简介.