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 ...

随机推荐

机器学习算法总结(六)——EM算法与高斯混合模型
极大似然估计是利用已知的样本结果,去反推最有可能(最大概率)导致这样结果的参数值,也就是在给定的观测变量下去估计参数值.然而现实中可能存在这样的问题,除了观测变量之外,还存在着未知的隐变量,因为变量未 ...
[CQOI2016]手机号码
嘟嘟嘟这题一看就是数位dp. 我写数位dp,一般是按数位dp的格式写一个爆搜,然后加一点记忆化. 不过其实我一直不是很清楚记忆化是怎么加,感觉就是把dfs里的参数都扔到dp数组里,好像很暴力啊. 这 ...
linux注释多行
方法一:使用可视化模块添加实现多行注释 1.打开文件/etc/password进行测试: vim /etc/password 2.进入到视图模式:按ctrl+v 1 root:x:0:0:root:/ ...
oradebug 10046
一.对当前的session使用oradebug命令: SQL> conn / as sysdba Connected. SQL> oradebug setmypid Statement p ...
Python2 处理 Unicode 字符串的规则
在 Python2 中处理 Unicode 字符串,需遵循如下规则: 1. 程序中的字符串要加前缀 u 2. 不要用 str(),而应该用 unicode() 作为字符串转换函数.不要使用 chr() ...
a,b为2个整型变量,在不引入第三个变量的前提下写一个算法实现 a与b的值互换
package com.Summer_0424.cn; /** * @author Summer * a,b为2个整型变量,在不引入第三个变量的前提下写一个算法实现 a与b的值互换? */ publi ...
2018Action Recognition from Skeleton Data via Analogical Generalization over Qualitative Representations
论文标题: 来源/作者机构情况: Northwestern University Thirty-Second AAAI Conference on Artificial Intelligence, 2 ...
在WinForm应用程序中快速实现多语言的处理(2)--开发框架模块的整合
我在上篇随笔<在WinForm应用程序中快速实现多语言的处理>里面介绍了Winform开发中多语言的处理解决方案,整个多语言解决方案是以实际需求为驱动,以减少代码改动,高效处理为目的,通过 ...
SQL Server-索引故事的遥远由来，原来是这样的？（二十八）
前言前段时间工作比较忙,每天回来也时不时去写有关ASP.NET Core的文章,无论是项目当中遇到的也好还是自学的也好都比较严谨的去叙述,喜欢分享,乐于分享这是我一直以来的态度,当然从中也会有些许错 ...
win 2008 R2 或以上版本，只有C盘情况下，PHP上传文件，显示不了解决办法
主要问题:因为没权限解决办法:给C:\Windows\Temp 加上IIS账户读写权限

mobile adaptor & css media query

mobile adaptor & css media query

demos

Phones and Handhelds

Tablets

Laptops

Wearables

mobile adaptor & css media query的更多相关文章

随机推荐

热门专题