css3 mediaquery

/**
 * 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-08-22 05:38:38

css3 mediaquery的相关文章

y-1.前端优化不完全

前端优化不完全指南 历时144000000毫秒出山的前端优化篇,若你问我有什么感悟?那我告诉你,看到毫秒啊,火箭啊,这些与优化相关的词,都有莫名的亲切感.本文主要从工作效率.速度性能.稳定性.响应式.兼容性.搜索SEO.信息无障碍等方面进行讲解.前端优化是一个让人技术提升的point,希望你也能从这里学到一些东西. 1 工作效率 你是否经常处于这样的场景:从早上忙到晚上八九点,一会与产品经理沟通,一会在部门群聊一下新奇的东西,一会被设计美眉纠缠住拖不了身,有时还开不了部门的会议因为页面急着上线,

响应式网页之媒体查询

由于现在的网页要兼容各种pc尺寸及ipad甚至手机屏幕,所以响应式的网页变得尤为重要.手写响应式网页,具体技术点有: 1.声明viewport元标签(响应式网页必备) <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> width - viewport的宽度 height - viewport的高度 initial-scale - 初

页面优化方法大全

1.2.1 编辑器 选择好一个前端编辑器是比较重要的.目前sublime.webstorm和vim是比较常见的,建议不使用Dreamweaver.sublime目前还是不错的选择,可以安装插件,比如BracketHighlighter 高亮显示.JsFormat.Emmet html/CSS快速编辑以及DocBlockr插件,快速输入jsDoc注释等,还可以自定义代码段snippets.无论你使用哪种编辑器,你需要的是熟悉这个编辑器并熟练它的快捷键. 1.2.2 浏览器开发者工具 作为前端人员,

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各个模块详解

一, CSS3 盒子 阴影 属性 box- shadow 也是 CSS3 新增 的 一个 重要 属性, 用来 定义 元素 的 盒子 阴影. inset: 阴影 类型, 可选 值. 如果不 设置, 其 默认 的 投影 方式 是 外 阴影: 如果 取其 唯一 值" inset", 就是 给 元素 设置 内 阴影. x- offset: 阴影水平偏移量, 其值可以是正负值. 如果取正值, 则 阴影 在 元素 的 右边, 反之 取 负值, 阴影 在 元素 的 左边. y- offset: 阴影

css,css3盒子水平垂直居中

垂直居中在面试中经常见到的题目.总结几种,希望大家多多指教. ....<sytle> .box{ width:100px; height:100px; border;1px solid red; position:relative;   //父集相对定位 } .box1{ width:50px; height:50px; border:1px solid #000; } </style><body> <div class="box"> &

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

css3变形 过渡 动画

CSS3 变形/变换 相关属性 transform 设置或检索对象的检索(none 2D 3D) transform-origin:设置或检索对象以某个原点进行检索 transform-style: flat(默认)指定子元素位于次元素所在平面内/preserve-3d 指定子元素定位在三维空间内 perspective: 长度单位 指定观察者距离平面的距离 perspective-origin 指定观察者的位置 left/right/center backface-visibialbe: vi

html+css3实现长方体效果

网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看.                   2017-07-25         21:30:23 html代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html+css3实现长方体效果<