CSS3 Media Queries 片段_CSS3教程
Responsive設(shè)計在現(xiàn)代Web設(shè)計中可謂是越來越流行，但很同學(xué)們并未理解其真正的設(shè)計概念，往往把Responsive視為一種自適應(yīng)布局。當(dāng)然有很多同學(xué)也在嘗試動寫Responsive的案例，但如何取其斷點(diǎn)左右糾結(jié)，如何設(shè)置哪幾個斷點(diǎn)?又從何入手?
Responsive中的斷點(diǎn)都依賴于CSS3的Media Queries來決斷。曾在CSS3 Media Queries模板、使用em單位創(chuàng)建CSS3的Media Queries和iPads和iPones的Media Queries有過這方面的介紹。今天特意根據(jù)一些Responsive框架整理了一些常見的Media Queries片段，以供大家參考：
CSS3 Media Queries片段
在這里主要分成三類：移動端、PC端以及一些常見的響應(yīng)式框架的Media Queries片段。
移動端Media Queries片段
iPhone5
@media screen and (device-aspect-ratio: 40/71) {}
或者：
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){}
iPhone 5 In Portrait & Landscape
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px){
// CSS Style
}
iPhone 5 In Landscape
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape){
// CSS Style
}
iPhone 5 In Portrait
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait){
// CSS Style
}
iPone4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {}
iPhone 3G
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1){}
iPhone
/*Landscape*/
@media screen and (max-device-width: 480px) {}
/*Portrait*/
@media screen and (max-device-width: 320px) {}
Blackberry Torch
@media screen and (max-device-width: 480px) {}
Samsung S3
@media only screen and (-webkit-device-pixel-ratio: 2) {}
Google Nexus 7
@media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {}
Samsung Galaxy S3
@media only screen and (-webkit-device-pixel-ratio: 2) {}
Samsung Galaxy S2
@media screen and (device-width: 320px) and (device-height: 533px) and (-webkit-device-pixel-ratio: 1.5) {}
Galaxy Tab 10.1
/*Landscape*/
@media (max-device-width: 1280px) and (orientation: landscape) {}
/*Portrait*/
@media (max-device-width: 800px) and (orientation: portrait) {}
iPad In Portrait & Landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){
// CSS Styles
}
iPad In Landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape){
// CSS Styles
}
iPad In Portrait
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
// CSS Styles
}
Retina iPad In Portrait & Landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2){
// CSS Styles
}
Retina iPad in landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){
// CSS Styles
}
Retina iPad in portrait
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
// CSS Styles
}
iPad Mini In Portrait & Landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){
// CSS Style
}
iPad Mini In Landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1){
// CSS Style
}
iPad Mini In Portrait
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
// CSS Style
}
桌面端
320px
@media screen and (max-width: 320px) {}
640px
@media screen and (max-width: 640px) {}
800px
@media screen and (max-width: 800px) {}
1024px
@media screen and (max-width: 1024px) {}
1028px
@media screen and (max-width: 1028px) {}
除了上面的常見Media Queries片段之外，下面的網(wǎng)站還提供了一些其他的片段：
框架Media Queries片段
Boilerplate
/*URL:http://HTML5/">html5boilerplate.com/*/
/* 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 */
}
Bootstrap的Media Queries
/*URL:http://twitter.github.com/bootstrap*/
/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }
Foundation的Media Queries
/*URL:http://foundation.zurb.com/*/
/* We use this media query to add styles to any device that supports media queries */
@media only screen { }
/* Used to alter styles for screens at least 768px wide. This is where the grid changes. */
@media only screen and (min-width: 768px) {}
/* Used to alter styles for screens at least 1280px wide. */
@media only screen and (min-width: 1280px) {}
/* Used to alter styles for screens at least 1440px wide. */
@media only screen and (min-width: 1440px) {}
/* Apply styles to screens in landscape orientation */
@media only screen and (orientation: landscape) {}
/* Apply styles to screens in portrait orientation */
@media only screen and (orientation: portrait) {}
Skeleton的Media Queries
/*URL:http://www.getskeleton.com*/
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
FRAMELESS的Media Queries
/*URL:http://framelessgrid.com/*/
@media screen and (max-width: 16.875em){}
@media screen and (min-width: 32.5em) and (max-width: 37.4375em),
screen and (min-width: 45em) and (max-width: 56.9375em),
screen and (min-width: 77.5em) and (max-width: 102.4375em),
screen and (min-width: 135em){}
@media screen and (min-width: 102.5em) and (max-width: 117.9375em),
screen and (min-width: 150em){}
@media screen and (min-width: 15em){}
@media screen and (min-width: 30em){}
@media screen and (min-width: 37.5em){}
@media screen and (min-width: 57em){}
@media screen and (min-width: 57em) and (max-width: 117.9375em){}
@media screen and (min-width: 118em){}
Susy的Media Queries
/*URL:http://susy.oddbird.net/*/
@media (min-width: 29em) {}
@media (min-width: 30em) and (max-width: 60em) {}
@media (min-width: 119em) {}
@media (min-width: 33.75em) and (max-width: 67.5em) {}
@media (min-width: 33.75em) and (max-width: 67.5em) {}
Less Framework 4
/*URL:http://lessframework.com/*/
@media only screen and (min-width: 768px) and (max-width: 991px) {}
/* Mobile Layout: 320px (20em). */
@media only screen and (max-width: 767px) {}
/*Wide Mobile Layout: 480px (30em)*/
@media only screen and (min-width: 480px) and (max-width: 767px) {}
Golden Grid System的Media Queries
/*URL:http://goldengridsystem.com/*/
/* @media screen and (min-width: 640px) */
@media screen and (min-width: 40em) {}
/* @media screen and (min-width: 720px) */
@media screen and (min-width: 45em) {}
/* @media screen and (min-width: 888px) */
@media screen and (min-width: 55.5em) {}
/* @media screen and (min-width: 984px) */
@media screen and (min-width: 61.5em) {}
/* @media screen and (min-width: 1200px) */
@media screen and (min-width: 75em) {}
/* @media screen and (min-width: 1392px) */
@media screen and (min-width: 87em) {}
/* @media screen and (min-width: 1680px) */
@media screen and (min-width: 105em) {}
/* @media screen and (min-width: 1872px) */
@media screen and (min-width: 117em) {}
/* @media screen and (min-width: 2080px) */
@media screen and (min-width: 130em) {}
Fluid baseline的Media Queries
/*URL:http://fluidbaselinegrid.com/*/
/* MOBILE PORTRAIT */
@media only screen and (min-width: 320px) {}
/* MOBILE LANDSCAPE */
@media only screen and (min-width: 480px) {}
/* SMALL TABLET */
@media only screen and (min-width: 600px) {}
/* TABLET/NETBOOK */
@media only screen and (min-width: 768px) {}
/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
@media only screen and (min-width: 1024px) {}
@media only screen and (min-width: 1280px) {}
/* WIDESCREEN */
/* Increased body size for legibility */
@media only screen and (min-width: 1400px) {}
320andUP
/*URL:http://stuffandnonsense.co.uk/projects/320andup*/
@media only screen and (min-width: 480px) {
/* 480 */
}
@media only screen and (min-width: 600px) {
/* 600 */
}
@media only screen and (min-width: 768px) {
/* 768*/
}
@media only screen and (min-width: 992px) {
/* 992*/
}
@media only screen and (min-width: 1382px) {
/* 1382 */
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
/* 2x*/
}
Gridless
/* URL:http://thatcoolguy.github.com/gridless-boilerplate/ */
@media only screen and (min-width: 480px) {
/* Wide mobile (480px+) styles go here */
}
@media only screen and (min-width: 768px) {
/* Tablets/netbooks (768px+) styles go here */
}
@media only screen and (min-width: 1024px) {
/* Desktops (1024px+) styles go here */
}
TotanTHEMES
/*URL:http://titanthemes.com/*/
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 989px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
Responsive Grid System
/*URL:http://responsive.gs/*/
@media (max-width: 480px) {}
@media (min-width: 480px) and (max-width: 768px) {}
@media (min-width: 768px) {}
@media (min-width: 1024px) {}
@media (min-width: 1200px) {}
本文搜集的是Media Queries在各種設(shè)備下的代碼片段，希望這些片段能幫大家更好的理解Responsive斷點(diǎn)的設(shè)置。如果大家有更好的方案，希望能在評論中分享。
2014年04月19日更新
基于視窗寬度的媒體查詢斷點(diǎn)設(shè)置
前提設(shè)置body的字體為100%。其具有一個簡單的計算公式：100% = 16px = 1em = 14pt
/*Viewport = 1920px*/
@media screen and (max-width: 120em){
}
/*Viewport = 1680px*/
@media screen and (max-width: 105em){
}
/*Viewport = 1400px*/
@media screen and (max-width: 87.5em){
}
/*Viewport = 1200px*/
@media screen and (max-width: 75em){
}
/*Viewport = 1024px*/
@media screen and (max-width: 64em){
}
/*Viewport = 960px*/
@media screen and (max-width: 60em){
}
/*Viewport = 800px*/
@media screen and (max-width : 50em){
}
/*Viewport = 768px*/
@media screen and (max-width : 48em){
}
/*Viewport = 600px*/
@media screen and (max-width: 37.5em){
}
/*Viewport = 480px*/
@media screen and (max-width: 30em){
}
/*Viewport = 320px*/
@media screen and (max-width: 20em){
}
/*Viewport = 240px*/
@media screen and (max-width: 15em){
}
/*
High Resolution/Retina Display Media Queries
*/
/*Pixel Density 3*/
@media(-webkit-min-device-pixel-ratio: 3),(min-resolution: 192dpi){
}
/*Pixel Density 2*/
@media(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){
}
/*Pixel Density 1.5*/
@media(-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 124.8dpi){
}
/*Pixel Density 1.25*/
@media(-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi){
}
/*
Printed Style Media Queries
*/
/*Print Resolution 300 dpi*/
@media print and (min-resolution: 300dpi){
}
/*Print Resolution 144 dpi*/
@media print and (min-resolution:144dpi){
}
/*Print Resolution 96 dpi*/
@media print and (min-resolution:96dpi){
}
/*Print Resolution 72 dpi*/
@media print and (resolution:72dpi){
}
CSS3教程Rss訂閱Div+Css教程搜索
猜你也喜歡看這些
- html5 application cache遇到的嚴(yán)重問題
- html5 canvas-2.用canvas制作一個猜字母的小游戲
- HTML5之SVG 2D入門9—蒙板及mask元素介紹與應(yīng)用
- HTML5之SVG 2D入門3—文本與圖像及渲染文本介紹
- 使用css如何制作時間ICON方法實(shí)踐
- 純html5+css3下拉導(dǎo)航菜單實(shí)現(xiàn)代碼
- html5播放視頻且動態(tài)截圖實(shí)現(xiàn)步驟與代碼(支持safari其他未測試)
- html5的新玩法——語音搜索
- 突襲HTML5之Javascript API擴(kuò)展5—其他擴(kuò)展(應(yīng)用緩存/服務(wù)端消息/桌面通知)
- html5 Canvas畫圖教程(5)—canvas里畫曲線之a(chǎn)rc方法
- 相關(guān)鏈接：
- 教程說明：
CSS3教程-CSS3 Media Queries 片段
。