mobile adaptor & css media query
mobile adaptor & css media query
移动端适配 & 媒体查询
device-aspect-ratio & 设备纵横比
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
demos
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Phones and Handhelds
/* ----------- 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, 5S, 5C and 5SE ----------- */
/* 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, 6S, 7 and 8 ----------- */
/* 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+, 7+ and 8+ ----------- */
/* 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) {
}
/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- Galaxy S3 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
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, S5 and Note 3 ----------- */
/* 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 S6 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: landscape) {
}
* ----------- Google Pixel ----------- */
/* 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) {
}
/* ----------- Google Pixel XL ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: landscape) {
}
/* ----------- 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) {
}
/* ----------- Windows Phone ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 480px)
and (device-height: 800px) {
}
/* Portrait */
@media screen
and (device-width: 480px)
and (device-height: 800px)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 480px)
and (device-height: 800px)
and (orientation: landscape) {
}
Tablets
/* ----------- iPad 1, 2, Mini and Air ----------- */
/* 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, 4 and Pro 9.7" ----------- */
/* 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) {
}
/* ----------- iPad Pro 10.5" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 834px)
and (max-device-width: 1112px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 834px)
and (max-device-width: 834px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1112px)
and (max-device-width: 1112px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* ----------- iPad Pro 12.9" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1366px)
and (max-device-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* ----------- Galaxy Tab 2 ----------- */
/* 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) {
}
/* ----------- Galaxy Tab S ----------- */
/* Portrait and Landscape */
@media
(min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media
(max-device-width: 800px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
@media
(max-device-width: 1280px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* ----------- 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) {
}
/* ----------- Nexus 9 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 1536px)
and (device-height: 2048px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {
}
/* Portrait */
@media screen
and (device-width: 1536px)
and (device-height: 2048px)
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: 1536px)
and (device-height: 2048px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {
}
/* ----------- 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) {
}
Laptops
/* ----------- 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) {
}
Wearables
/* ----------- 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) {
}
mobile adaptor & css media query的更多相关文章
- CSS Media Query
[CSS Media Query] CSS Media Queries are a feature in CSS3 which allows you to specify when certain C ...
- css Media Query详解
Media Queries详解 Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: 1 <link href="css/re ...
- CSS media query应用中的层叠特性使用最佳实践
media query是css3规范中引入的,它提供了一种responsive design的基础机制:浏览器在不同size的设备中将以不同样式展现网页,这就给一个网页能够适应不同device一种可能 ...
- iPhone CSS media query（媒体查询）
iPhone5 iPhone6 iPhone6Plus iPad设备 media query(媒体查询)代码. iPhone < 5: @media screen and (device-a ...
- 一些实用的CSS Media Query代码片段，个人采集
CSS3的出现让响应式Web设计变得简单,CSS3提供了强大的media queries,允许你针对不同的条件设置不同的样式,可以在不修改页面内容的情况下,为不同设备提供不同的样式效果. 以下是一些C ...
- 响应式设计的思考:媒体查询(media query)
Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool’s Gold>对媒体查询(media query)吐槽,大意是在移动设备上使 ...
- CSS media queries
最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...
- 采用CSS3 Media Query技术适应Android平板屏幕分辨率和屏幕像素密度
采用HTML5在开发移动应用程序满足各种需求Android分辨率和屏幕的平板设备密度,这是非常麻烦的过程,最终的解决方案是使用css media query,匹配相同的时间分辨率和屏幕像素密度.上进行 ...
- 脚本检测 media query 分界点
当需要为不同屏幕大小添加不同脚本的时候,首先需要检测对应的media query 是否起效 也就是CSS( @screen only and (min-width: 40em) {})和javascr ...
随机推荐
- 极光推送(C#)
推荐使用appSetting 加载这两个参数 webConfig: <appSettings> <add key="AppKey" value="ccc ...
- P1184 高手之在一起（字典树模板题，hash算法， map）
哎,唯一值得说明的是,这道题的输入有bug 先把字典树的算法模板放一下 #include<iostream> #include<cstring> using namespace ...
- OpenCV遍历彩色图像、灰度图像的像素值方法
https://blog.csdn.net/mooneve/article/details/53001677 应用:将彩色图像转为灰度图像输出 方法一 使用ptr函数和指针 (高效) void mai ...
- day24 Pythonpython 面向对象设计 类
将一些相同特征和动作的成为类,现有类才能创建对象,对象就是特征和动作的结合体 类:把一类事物的相同特征和动作整合到一起就是类.类是一个抽象概念 对象:就是基于类而创建的一个具的事物(具体存在的),也是 ...
- 【vue】css解决“防抖动”——防止页面加载图片抖动
overflow:hidden;height:0;padding-bottom:*; // 其中*处填 图片的高宽百分比=高/宽*100%
- 读写分离子系统 - C# SQL分发子系统 - Entity Framework支持
A2D Framework增加了EF支持,加上原先支持ADO.NET: 支持EF方式 支持ADO.NET方式 这次来讲如何让Entity Framework变成nb的读写分离 1. 先设计EF模型, ...
- A2D JS框架
写了个微型JS框架 主要实现了:showDialog.noConflict.定位元素.event绑定功能 使用端的代码: <head> <title></title> ...
- 【重磅】Spring Boot 2.1.0 权威发布
如果这两天登录 https://start.spring.io/ 就会发现,Spring Boot 默认版本已经升到了 2.1.0.这是因为 Spring Boot 刚刚发布了 2.1.0 版本,我们 ...
- Leetcode -- 394. Decode String
Given an encoded string, return it's decoded string. The encoding rule is: k[encoded_string], where ...
- Latex(表格|图片(一丢丢))
目录 普通的例子 Notation 例子 p{width} 列分割符 @{} \multicolumn supertabular | longtabular 浮动体 table 浮动体 图片 \use ...