CSS Media Queries 模板

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; } }

相关日志 »

• 2011/06/19 -- CSS3 Multiple backgrounds 和 CSS3 Animation (0)
• 2011/03/21 -- 一些有用的Web前端开发技巧 (2)
• 2010/05/06 -- CSS3 和 HTML5 兼容性测试 (3)
• 2010/03/22 -- 简单的斑马纹表格 (2)
• 2010/01/24 -- 在Webkit浏览器中，使用CSS3替代7个JavaScript效果 (0)
• 2010/01/18 -- 用CSS改变选择文本的背景颜色 (1)
• 2009/11/03 -- 征服，高级CSS选择器(收藏) (1)
• 2009/09/21 -- CSS3的新功能快速体验和应用 (1)
• 2009/09/01 -- CSS 3.0 中文参考手册 & CSS3系列教程 (1)