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

随机推荐

[Vuejs] svg-sprite-loader实现加载svg自定义组件
1.安装 svg-sprite-loader npm install svg-sprite-loader -D 或者 npm install svg-sprite-loader --save-dev ...
MD5( 信息摘要算法)的概念原理及python代码的实现
简述: message-digest algorithm 5(信息-摘要算法).经常说的“MD5加密”,就是它→信息-摘要算法. md5,其实就是一种算法.可以将一个字符串,或文件,或压缩包,执行md ...
python应用-爬取猫眼电影top100
import requests import re import json import time from requests.exceptions import RequestException d ...
Spring Cloud是怎么运行的？
导读在之前的文章中给大家介绍了Spring Boot的基本运行原理(链接),收到了很多读者朋友们关于目前比较流行的微服务框架Spring Cloud的问题反馈.因此,在这篇文章中小码哥打算和大家一起 ...
foreach加循环体与不加循环体的区别
案例A(不加{}): <?php function genTree5($items) { foreach ($items as $item) echo $item['id'];die; $ite ...
【转载】app测试的过程和重点关注内容
针对 app测试的过程和重点关注内容,做以下梳理和总结: 1 . 首先是测试资源确认及准备 ( 1 ) 产品需求文档.产品原型图.接口说明文档以及设计说明文档等应齐全: ( 2 ) 测试设备及工具 ...
菜鸟系列docker——docker仓库(2)
1.仓库Registry 我们一般的镜像都是保存在仓库中,这样在其他服务器上可以直接从仓库获取镜像.仓库一般分为公共registry和私有registry.公共registry一般是Docker公司负 ...
Spark提高篇——RDD/DataSet/DataFrame（二）
该部分分为两篇,分别介绍RDD与Dataset/DataFrame: 一.RDD 二.DataSet/DataFrame 该篇主要介绍DataSet与DataFrame. 一.生成DataFrame ...
perl选项、特殊变量、一些函数参考手册
perl一行式程序系列文章:Perl一行式本文用来收集Perl一行式中涉及到的一些选项.特殊变量的说明,可以用来做速查手册. 本文会逐渐更新. 第一次学Perl一行式时,请直接忽略本文内容,并直接从 ...
翻译：delete语句(已提交到MariaDB官方手册)
本文为mariadb官方手册:DELETE语句的译文. 原文:https://mariadb.com/kb/en/delete/ 我提交到MariaDB官方手册的译文:https://mariadb. ...

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

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

随机推荐

热门专题