【原】CSS3 Media在常用设备的设置值
摘要：今天的一个小小的项目中，在各种手机上样式都显示正常，唯独iphone4s的有些许问题。产品经理又说iphone4s用户还挺多的，无奈，只能查一查iphone4s的media值，顺便做个小小总结;
直接上代码：
手机
iphone
/* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
} /* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) { } /* ----------- iPhone 5 and 5S ----------- */ /* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
} /* 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 6 ----------- */ /* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) { } /* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) { } /* ----------- iPhone 6+ ----------- */ /* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) { } /* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) { } /* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) { }
Galaxy phone
/* ----------- Galaxy S3 ----------- */ /* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) { } /* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) { } /* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) { } /* ----------- Galaxy S4 ----------- */ /* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) { } /* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) { } /* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) { } /* ----------- Galaxy S5 ----------- */ /* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) { } /* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) { } /* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) { }
HTC phone
/* ----------- HTC One ----------- */ /* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) { } /* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) { } /* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) { }
平板
Ipads
/* ----------- iPad mini ----------- */ /* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) { } /* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) { } /* 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 and 2 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) { } /* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) { } /* 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 and 4 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) { } /* 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 Tablets
/* ----------- Galaxy Tab 10.1 ----------- */ /* Portrait and Landscape */
@media
(min-device-width: 800px)
and (max-device-width: 1280px) { } /* Portrait */
@media
(max-device-width: 800px)
and (orientation: portrait) { } /* Landscape */
@media
(max-device-width: 1280px)
and (orientation: landscape) { }
Asus Tablets
/* ----------- Asus Nexus 7 ----------- */ /* Portrait and 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) { } /* 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) { } /* 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
/* ----------- Kindle Fire HD 7" ----------- */ /* Portrait and Landscape */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) { } /* 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) {
} /* 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" ----------- */ /* Portrait and Landscape */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) { } /* 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) {
} /* 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) { }
笔记本电脑
LapTaps
/* ----------- 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
/* ----------- Apple Watch ----------- */
@media
(max-device-width: 42mm)
and (min-device-width: 38mm) { }
Moto 360 Watch
/* ----------- Moto 360 Watch ----------- */
@media
(max-device-width: 218px)
and (max-device-height: 281px) { }
微信页面的适配
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */}
@media only screen and (max-device-width :480px){ }
@media only screen and (min-device-width :481px){ }
/**/
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ }
/*6+*/
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ }
/*魅族*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ }
/*mate7*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ }
/*4 4s*/
@media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ }
参考： https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
【原】CSS3 Media在常用设备的设置值的更多相关文章
- 使用CSS3 @media 设置页面自适应
参考CSS3 @media 查询 如果文档宽度小于 300 像素则修改背景演示(background-color): @media screen and (max-width: 300px) { bo ...
- [转]CSS3 Media Query实现响应布局
讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...
- css3 media媒体查询器用法总结
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
- css3 media媒体查询器用法总结 兼容ie8以下的方法
总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml ...
- CSS3@media媒体查询
CSS3@media媒体查询 定义 media媒体查询, 当文档宽度变化时, 就可以根据文档宽度的变化来运用样式,不同的宽度应用不同的样式 使用 @media 查询,你可以针对不同的媒体类型定义不同的 ...
- 转: CSS3 @media 用法总结
一.首先是<meta>标签 <meta name="viewport" content="width=device-width, initial-sca ...
- css3 media媒体查询器用法总结（附js兼容方法）
css3 media媒体查询器用法总结 标签:class 代码 style html sp src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...
- CSS3 media媒体查询器的使用方法
最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多.但是怎样使得网站能自适应屏幕呢?这里就需要提到一个css3里面新增的技术了-media媒体查询器. 那么什么是me ...
- 使用CSS3 Media Queries实现网页自适应
原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不 ...
随机推荐
- Multiprotocol Label Switching (MPLS)
Posted by: Margaret Rouse WhatIs.com Contributor(s): Robert Sturt This definition is part of our E ...
- Linux终端更改提示符
打开~/.bashrc可以看到命令提示的内容为:\u@\h\w\$ \u表示用户名,\h表示主机名,\w表示当前目录,\$表示命令提示符(普通用户$,超级用户#) 这个命令提示符有点长,很碍事,\u@ ...
- Linux配置VNC实现远程图形化操纵
问题描述 有些时候需要用到图形化,其实可以通过其他途径实现.但是懒惰的就喜欢VNC,总的老说都是需要图形组件的 问题解决 在Centos测试 一.图形化的Linux 01.安装 rpm ivh vn ...
- ASP.NET 使用Ajax
转载: http://www.cnblogs.com/dolphinX/p/3242408.html $.ajax向普通页面发送get请求 这是最简单的一种方式了,先简单了解jQuery ajax的语 ...
- android开机自启动广播
权限<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/> &l ...
- android部分开发摘要
Async 异步 不会阻塞当前线程sync 同步 数据库是应用软件|结构化数据存储 JDBC SQL ellipsis 省略 content provider URI thread--lo ...
- IntelliJ_13_配置tomcat
一.下载tomcat7并解压 http://tomcat.apache.org/download-70.cgi http://apache.fayea.com/tomcat/tomcat-7/v7.0 ...
- 网页端压缩解压缩插件JSZIP库的使用
JSZIP这个库支持在网页端生成zip格式的文件, 官方网站是:http://stuk.github.io/jszip/ 官方网站的DEMO如下: <!DOCTYPE html> < ...
- 通过javascript在网页端解压zip文件并查看压缩包内容
WEB前端解压ZIP压缩包 web前端解压zip文件有什么用: 只考虑标准浏览器的话, 服务器只要传输压缩包到客户端, 节约了带宽, 而且节约了传输时间, 听起来好像很厉害的说: 如果前端的代 ...
- poj3177 && poj3352 边双连通分量缩点
Redundant Paths Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12676 Accepted: 5368 ...