css:Media Queries: How to target desktop, tablet and mobile?

<!doctype html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta charset="utf-8">

<title>Media Queries: How to target desktop, tablet and mobile?</title>

<meta name="keywords" content="geovindu">

<meta name="description" content="涂聚文">

<meta name="author" content="涂聚文">

<style type="text/css">

/*

	Media Queries: How to target desktop, tablet and mobile?

http://webdesignerwall.com/tutorials/css3-media-queries

https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

https://wordpress.org/plugins/wp-mobile-detect/

https://html5test.com/results/desktop.html

	*/

/* ----------- 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) {

/* define mobile specific styles come here */

}

/* 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: 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, 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) {

}

/* ----------- 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) {

}

/* ----------- 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) { 

}	

</style>

</head>

<body>

</body>

</html>

css:Media Queries: How to target desktop, tablet and mobile?的更多相关文章

移动设备上的媒体查询 CSS media queries for mobile device
CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...
[CSS3] CSS Media Queries
Using CSS media queries allows you to design responsive layout in your web apps and website. We will ...
CSS media queries
最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...
CSS media queries 媒体查询
最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...
Device Pixel Ratio & Media Queries
一些重要的名词解释: CSS pixels(CSS 像素):详见http://www.w3.org/TR/css3-values/#reference-pixe CSS声明的像素值,可随着放大缩小而放 ...
实践 HTML5 的 CSS3 Media Queries
先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...
基于 CSS3 Media Queries 的 HTML5 应用
先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...
HTML5实践 -- 使用CSS3 Media Queries实现响应式设计
CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...
iPads和iPhones的Media Queries
iPad Media Queries 1.iPad Media Queries (所有版本,包括iPad mini) iPads从第一代到至今,总共有五代,也就是iPad1~iPad5,以及Mini ...

随机推荐

使用Consul 实现 MagicOnion(GRpc) 服务注册和发现
1.下载打开Consul 笔者是windows下面开发的(也可以使用Docker). 官网下载windows的Consul https://www.consul.io/ 使用cmd窗口打开,输入con ...
Day6:html和css
Day6:html和css 复习 margin: 0; padding: 0; <!DOCTYPE html> <html lang="en"> <h ...
Mac环境下PHP连接mysql提示Server sent charset (255) unknown和(HY000/2054)
错误提示: mysqli_connect(): Server sent charset (255) unknown to the client. Please, report to the devel ...
[原创]K8Cscan插件之Weblogic漏洞扫描&通用GetShell Exploit
[原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...
[原创]K8mysqlCmd数据库免驱连接工具
无需机器安装MYSQL驱动,可用于内网渗透(如远控cmd下连接目标内网不可上网机器数据库) 当然目标机可代理出来的话,没必要使用该工具了因为很多功能SQL语句需要自己打,很多人可能不懂如果更新2. ...
H5在WebView上开发小结
背景来自我司业务方要求,需开发一款APP.但由于时间限制,只能采取套壳app方式,即原生app内嵌webview展示前端页面.本文主要记述JavaScript与原生app间通信,以及内嵌webvie ...
【python】re库正则的一些过滤和把str拆分成list案例以及json dict类型
0x01: 部分参考:https://www.cnblogs.com/edwardsun/p/4421773.html match(string[, pos[, endpos]]) | re.matc ...
docker - 容器里安装redis
在docker中安装redis 使用命令行安装redis 下载并解压 wget http://download.redis.io/releases/redis-3.2.6.tar.gz tar -xv ...
最好用的编辑器之一：Vim-Go环境搭建
本文由Librant发表如果说在Linux环境下,什么编辑器最好用,如果我说是VIM,估计会有一大部分人嗤之以鼻,怎么可能.VIM可能是他用过众多编辑器最难用的一个.在我司用的是云虚拟机,说实话吧, ...
Java 容器源码分析之 TreeMap
TreeMap 是一种基于红黑树实现的 Key-Value 结构.在使用集合视图在 HashMap 中迭代时,是不能保证迭代顺序的: LinkedHashMap 使用了双向链表,保证按照插入顺序或者访 ...

css:Media Queries: How to target desktop, tablet and mobile?

css:Media Queries: How to target desktop, tablet and mobile?的更多相关文章

随机推荐

热门专题