201509181046_《css3——media query整理》

@charset "utf-8";

/**
 * iPhone 4/4s landscape & portrait
 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-device-pixel-ratio: 2)
and (device-aspect-ratio: 2/3) {

}

/**
 * iPhone 4/4s portrait
 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-device-pixel-ratio: 2)
and (device-aspect-ratio: 2/3)
and (orientation:portrait)  {

}

/**
 * iPhone 4/4s landscape
 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-device-pixel-ratio: 2)
and (device-aspect-ratio: 2/3)
and (orientation:landscape) {

}

/**
 *  iPhone 5/5s landscape & portrait
 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {

}

/**
 *  iPhone 5/5s portrait
 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {

}

/**
 *  iPhone 5/5s landscape
 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {

}

/**
 *  iPhone 5/5s landscape & portrait
 */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {

}

/**
 *  iPhone 5/5s portrait
 */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {

}

/**
 *  iPhone 5/5s landscape
 */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {

}

@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
}
/**
 *  Galaxy S3 landscape & portrait
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {

}

/**
 *  Galaxy S3 portrait
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {

}

/**
 *  Galaxy S3 landscape
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {

}

/**
 *  Galaxy S4 landscape & portrait
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {

}

/**
 *  Galaxy S4 portrait
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {

}

/**
 *  Galaxy S4 landscape
 */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {

}

/**
 *  Galaxy S5 landscape & portrait
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {

}

/**
 *  Galaxy S4 portrait
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {

}

/**
 *  Galaxy S4 landscape
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {

}

/**
 *  HTC One landscape & portrait
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {

}

/**
 *  HTC One portrait
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {

}

/**
 *  HTC One landscape
 */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {

}

/**
 *  iPad Mini landscape & portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {

}

/**
 *  iPad Mini portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {

}

/**
 *  iPad Mini landscape
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {

}

/**
 *  iPad 1/2 landscape & portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {

}

/**
 *  iPad 1/2 portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {

}

/**
 *  iPad 1/2 landscape
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {

}

/**
 *  iPad 3/4 landscape & portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {

}

/**
 *  iPad 3/4 portrait
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {

}

/**
 *  iPad 3/4 landscape
 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {

}

/**
 *  Galaxy Tab 10.1 landscape & portrait
 */
@media
(min-device-width: 800px)
and (max-device-width: 1280px) {

}

/**
 *  Galaxy Tab 10.1 portrait
 */
@media
(max-device-width: 800px)
and (orientation: portrait) {

}

/**
 *  Galaxy Tab 10.1 landscape
 */
@media
(max-device-width: 1280px)
and (orientation: landscape) {

}

/**
 *  Asus Nexus 7 landscape & portrait
 */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {

}

/**
 *  Asus Nexus 7 portrait
 */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {

}

/**
 *  Asus Nexus 7 landscape
 */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {

}

/**
 *  Kindle Fire HD 7" landscape & portrait
 */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {

}

/**
 *  Kindle Fire HD 7" portrait
 */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}

/**
 *  Kindle Fire HD 7" landscape
 */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {

}

/**
 *  Kindle Fire HD 8.9" landscape & portrait
 */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {

}

/**
 *  Kindle Fire HD 8.9" portrait
 */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}

/**
 *  Kindle Fire HD 8.9" landscape
 */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {

}

/**
 *  Non-Retina Screens
 */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}

/**
 *  Retina Screens
 */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}

/**
 *  Apple Watch
 */
@media
(max-device-width: 42mm)
and (min-device-width: 38mm) {

}

/**
 *  Moto 360 Watch
 */
@media
(max-device-width: 218px)
and (max-device-height: 281px) {
时间: 2024-11-08 01:24:24

201509181046_《css3——media query整理》的相关文章

201509280825_《css3——media query整理2》

1.Smartphones (竖板和横板) @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* 你的样式写在这里 */ } 2.Smartphones (横板) @media only screen and (min-width : 321px) { /* 你的样式写在这里 */ } 3.Smartphones (竖板) @media only screen and (max-

响应式布局(二)—— CSS3 Media Query

响应式布局有三种实现方式: CSS3 Media Query 原生 JS 代码 第三方开源框架(最常见的有 bootstrap) CSS3 -- Media Query 1. 媒体查询实现方式 方式一:styleSheet样式表中的写法: 如:<style>标签中使用@media <style> @media screen and (min-width: 480px) { body{background: blue;} } </style> 方式二:<link&g

使用CSS3 Media Query技术适配Android平板屏幕分辨率和屏幕密度

使用HTML5开发移动应用时需要适配各种Android平板设备的分辨率和屏幕密度,过程实在很麻烦,最后的解决办法是使用css media query,同时匹配分辨率和屏幕密度,在每个设备上进行兼容性测试,最终保证在多数Android平板上都能较好的显示. 一个典型的针对设备的Css Media Query写法如下,可以保证页面高度充满屏幕,简单的设置height:100%是不行的. //SAMSUNG N5100, Nexus7 1, @media only screen and (min-de

IE8以下不支持css3 media query的解决办法

针对IE8以下不支持css3的media query,可以使用response.js解决 下载地址:https://github.com/scottjehl/Respond/ 这里有一篇关于其实现原理的文章:http://caibaojian.com/respondjs.html 引用时的注意点: 不可将媒介查询代码写在html内部,因为response是通过ajax分析link引入的css文件,故html里面的样式将被忽略. 引入文件需在css引入之后 <!--[if lte IE 8]>

CSS3 Media Query实现响应式Web设计(针对不同移动设备宽度)

如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况下,固定宽度的设计方案将会显得越发不合理.页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整.接下来,我们将了解一下怎样通过HTML5和CSS3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案 范例效果预览 首先,我们来看看本篇范

CSS3 Media Query实现响应Web设计(宽度为不同的移动设备)

现在的屏幕分辨率.小到320px(iPhone),大到2560px或甚至更高(大显示屏).范围内变化很大.除了使用传统的台式机.用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面. 这样的情况下,固定宽度的设计方案将会显得越发不合理.页面须要有更好的适应性,其布局结构要做到依据不同的设备及屏幕分辨率进行响应调整.接下来,我们将了解一下如何通过HTML5和CSS3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案 范例效果预览 首先,我们来看

Respond.js让IE6-8支持CSS3 Media Query

Bootstrap里面就引入了这个js文件,从名字看出来是自适应的兼容.打开IE看了一下,效果挺好的,自适应的效果挺好的.Respond.js让不支持CSS3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询. 使用方式 官方demo地址:http://scottjehl.github.com/Respond/test/test.html 1.在css中正常用 min/max-width media queries @media screen and (min-width:

[转]CSS3 Media Query实现响应布局

讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局.响应式布局的优点和缺点以及响应式布局该怎么设计(通 过CSS3 Media Query实现响应布局). 一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端—

响应式布局之CSS3 media query

media query即媒体查询,是响应式布局不可获缺的一部分. CSS3中的media query增加了更多的媒体查询,这样在CSS3中我们可以在不改变页面表达内容的情况下,添加各种表达式来设置不同类型的媒体条件,来调整页面布局来适应各种不同设备. media query有两种设置方式: 1.直接在link中判断设备尺寸,引用不同的css来渲染当前页面. <link rel='stylesheet' media ='screen and (max-width:640px)' href = 's