CSS3 Media Queries 片段

CSS3 Media Queries片段

在这里主要分成三类：移动端、PC端以及一些常见的响应式框架的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片段之外，下面的网站还提供了一些其他的片段：

框架Media Queries片段

Boilerplate

/*URL:http://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在各种设备下的代码片段，希望这些片段能帮大家更好的理解Responsive断点的设置。如果大家有更好的方案，希望能在评论中分享。

2014年04月19日更新

基于视窗宽度的媒体查询断点设置

前提设置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){

}

更新：iPhone6

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
     /*iPhone 6 Portrait*/
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
     /*iPhone 6 landscape*/
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
     /*iPhone 6+ Portrait*/
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {
     /*iPhone 6+ landscape*/
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){
     /*iPhone 6 and iPhone 6+ portrait and landscape*/
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){
     /*iPhone 6 and iPhone 6+ portrait*/
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){
     /*iPhone 6 and iPhone 6+ landscape*/
}

如需转载，烦请注明出处：http://www.w3cplus.com/css3/media-query-snippets.html

时间： 2024-10-26 02:44:25

CSS3 Media Queries 片段的相关文章

CSS3教程:Responsive框架常见的Media Queries片段

文章简介:Responsive中的断点都依赖于CSS3的Media Queries来决断.曾在CSS3 Media Queries模板.使用em单位创建CSS3的Media Queries和iPads和iPones的Media Queries有过这方面的介绍. Responsive设计在现代Web设计中可谓是越来越流行,但很同学们并未理解其真正的设计概念,往往把Responsive视为一种自适应布局.当然有很多同学也在尝试动写Responsive的案例,但如何取其断点左右纠结,如何设置哪几个断点

CSS3 Media Queries模板:max

文章简介:最早在<CSS3 Media Queries>一文中初探了CSS3的媒体类型和媒体特性的相关应用. 最早在<CSS3 Media Queries>一文中初探了CSS3的媒体类型和媒体特性的相关应用.简单的知道了使用这个能在各种不同的设备显示不一样的样式风格. 从这几篇文章中可以知道,在Responsiv的设计中,CSS3的Media是起着非常关键性的作用,也可以说没有CSS3 Media这个属性,Responsiv设计是玩不起来,也是玩不转的.大家都知道Responsiv

ss教程：CSS3 Media Queries 详解

说起CSS3的新特征,就不得不提到MediaQueries. 本文比力细致,所以良多隐真顶用不到.所以若是只是想简略领会MediaQueries,保举参考CSS3MediaQueries. CSS2.1界说了Media的部门,包罗类型.组别战法则等.CSS并非为了显示器而创造,而是使用于各类各样的,好比常见的显示器,越来愈多的手持设施,可能略显过期的电视机等等. css教程:CSS3 Media Queries 详解,css3教程,css3教程而MediaQueries的引入,其作用就是答应增添

HTML5和CSS3 Media Queries响应式Web设计方案

文章简介:通过CSS3 Media Query实现响应式Web设计. 十一长假已然过去了一大半.今天倒真是晴朗的不行,向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子.自从不再是学生,对每年的几次长假就无比珍惜,想方设法让每一天都尽量过的饱满一些:夜里闭上眼,满脑子就都是Drupal.博客.咖啡.使命召唤.南方公园...也许需要出门走一走了. OK开始说正经的了.在之前一篇译文中,我们了解了响应式Web设计的概念.组成要素以及基本的实现思路.今天继续相关话题,我们将从前文介绍过的"弹

详解CSS3 Media Queries

网页制作Webjx文章简介:说起CSS3的新特性,就不得不提到 Media Queries . 本文比较详细,所以很多实际中用不到.所以如果只是想简单了解Media Queries,推荐参考 CSS3 Media Queries . CSS2.1定义了 Media 的部分,包括类型.组别和规则等.CSS并非为了显示器而创造,而是应用于各种各样的 说起CSS3的新特性,就不得不提到 Media Queries . 本文比较详细,所以很多实际中用不到.所以如果只是想简单了解Media Queries

css教程：CSS3 Media Queries 详解

网页制作Webjx文章简介:说起CSS3的新特性,就不得不提到 Media Queries . 本文比较详细,所以很多实际中用不到.所以如果只是想简单了解Media Queries,推荐参考 CSS3 Media Queries . CSS2.1定义了 Media 的部分,包括类型.组别和规则等.CSS并非为了显示器而创造,而是应用于各种各样的 说起CSS3的新特性,就不得不提到 Media Queries . 本文比较详细,所以很多实际中用不到.所以如果只是想简单了解Media Queries

CSS3 Media Queries 详解

说起CSS3的新特性,就不得不提到 Media Queries . 本文比较详细,所以很多实际中用不到.所以如果只是想简单了解Media Queries,推荐参考 CSS3 Media Queries . CSS2.1定义了 Media 的部分,包括类型.组别和规则等.CSS并非为了显示器而创造,而是应用于各种各样的媒体,比如常见的显示器,越来愈多的手持设备,可能略显过时的电视机等等. 而 Media Queries 的引入,其作用就是允许添加表达式用以确定媒体的情况,以此来应用不同的样式表.换

ie兼容-关于IE8以下兼容css3 media queries方法询问

问题描述 关于IE8以下兼容css3 media queries方法询问 各位大神 请教个问题 <!--[if lte IE 8]> (function(){ //为了不出现闪屏,在body下直接切换全局class,window.resize可以在domready后切换 var D=KISSY.DOM,w=D.viewportWidth(),b=document.body; if(w<1200){D.addClass(b,"w990")} else {D.addCla

CSS3 media queries结合jQuery实现响应式导航_jquery

目的: 实现一个响应式导航,当屏幕宽度大于700px时,效果如下: 当屏幕宽度小于700px时,导航变成一个小按钮,点击之后有一个菜单慢慢拉下来:   思路: 1.为了之后在菜单上绑定事件,并且不向DOM中添加多余的节点,在大屏幕中出现的导航和小屏幕中的下拉导航必须是一个.    所以我选择了将导航绝对定位. 2.默认导航列表是出现的,当屏幕宽度小于700px时它隐藏,并且设置position,当屏幕宽度大于700px时,它出现.或者,默认导航列表是隐藏的,当屏幕宽度大于700px时它出现在右侧