Media Queries 媒体查询常见设备断点
按需调整断点
一、谷歌后摘抄的一部分媒体查询
/*#region SmartPhones */
/* SmartPhones */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
/* Landscape */
@media only screen and (min-width : 321px) {}
/* Portrait */
@media only screen and (max-width : 320px) {}
/*#endregion */
/*#region 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 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 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) {}
/* ----------- 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) {}
/*#endregion */
/*#region Tablets */
/* ----------- 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 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 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 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) {}
/*#endregion */
/*#region 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) {}
/*#endregion */
/*#region 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) {}
/*#endregion */
/*#region Desktops & Laptops */
@media only screen and (min-width : 1224px) {}
/* Large Screens */
@media only screen and (min-width : 1824px) {}
/* Windows 8 SnapMode */
@media screen and (max-width:400px) {
@-ms-viewport { width: 320px; }
}
/*#endregion */
二、Bootstrap 采用的媒体查询
/*#region Bootstrap Media Query */
/* 超小屏幕（手机，小于 768px） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {}
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992px) {}
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) {}
/* screen-xs-max */
@media (max-width: 767px) {}
/* screen-sm-min & screen-sm-max */
@media (min-width: 768px) and (max-width: 991px) {}
/* screen-md-min & screen-md-max */
@media (min-width: 992px) and (max-width: 1199px) {}
/* screen-lg-min */
@media (min-width: 1200px) {}
/*#endregion */
Media Queries 媒体查询常见设备断点的更多相关文章
- Media Queries媒体查询
Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的页面效果.Media Queries有其自己的使用规则.一个媒体查询由一个可选的媒体类型和媒体特性表达式,使 ...
- media queries 媒体查询使用
media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,< ...
- Media Queries 媒体查询
1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
- css3之Media Queries 媒体查询
一.初步了解 Media Queries是CSS3新增加的一个模块功能,其最大的特点就是通过css3来查询媒体,然后调用对应的样式. 了解Media Queries之前需要了解媒体类型以及媒体特性: ...
- CSS media queries 媒体查询
最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...
- CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）
/* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (m ...
- CSS3 之 Media（媒体查询器）
1.响应式Media(媒体查询器) (1)<link rel=“stylesheet” media=“screen and (max-width: 600px)” href=“small.css ...
- media query(媒体查询)和media type(媒体类型)
media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...
- media query媒体查询
媒体查询(CSS3 media query) 一.逻辑操作符:not.and.only not:not操作符用来对一条媒体查询的结果取反. and:and操作符用来把多个媒体属性组合起来,合并到同一条 ...
随机推荐
- JavaScript学习-4——DOM对象、事件
本章目录 --------window对象 --------document对象 --------事件 一.window对象 函数调用: 自己封装的函数只写:函数名(): 数学函数Math 例:绝对值 ...
- 移动端UL列表无法平滑向下滚动问题
问题说明: 移动端向上滑动后,,列表无法自动滚动到底部~~而是类似屏幕"沾手"的效果(手离开屏幕直接停止在当前~列表不会自动向下滚动一段) 问题原因: 页面中存在如下代码: 当前页 ...
- Linux 子网掩码计算, 二进制十进制互相转换
看下边例子 192.168.0.1/24 192.168.0.1/32 192.168.0.1/28 上边24,32,28对应的掩码都是什么,怎么计算的 24,32,28,对应的就是多少个二进制的1 ...
- mysql学习笔记--数据完整性
一.数据完整性包括: 1. 域完整性 2. 实体完整性 3. 引用完整性 二.保证实体完整性 1. 主键约束 2. 唯一约束 3. 自动增长列 三.保证域完整性 1. 数据类型约束 2. 非空约束 3 ...
- 【python原理解析】python中分片的实现原理及使用技巧
首先:说明什么是序列? 序列中的每一个元素都会被分配一个序号,即元素的位置,也称为索引:在python中的序列包含:字符串.列表和元组 然后是:什么是分片? 分片就是通过操作索引访问及获得序列的一个或 ...
- FortiGate防火墙对数据包处理流程
1.流程图 2.防火墙对数据包处理过程的各步骤如下: 1)Interface(网卡接口) 网卡接口驱动负责接数收据包,并转交给下一过程. 2)DoS Sensor(DoS防御,默认关闭) 负责过滤SY ...
- Centos7 进入单用户模式，修复系统
一.开机时进入如下界面,(按下方向键盘,阻止系统自动继续) 按e键出现下面界面 按方向键下,定位到最后,找到“ro”一行,ro的意思是read only,将“ro”替换成 rw init=/sysro ...
- Python开发——文件操作
文件的读取 http://www.cnblogs.com/linhaifeng/articles/5984922.html
- 批量屏蔽符合条件的IP地址《目前仅测Centos 6 版本》
使用办法:可以将下面的sh保存到一个单独的文件中,比如ipad.sh,然后再编辑获取IP地址列表中的那段.最终的结果是需要直接获取到IP地址,一行一个,可以有多个文件,一行一个,进行重定向到指定的IP ...
- Linux module 添加到bashrc 和临时ifort编译器 以及python2和3的配置
第一步vim ~/.bashrc按键盘的i然后source /home/export/online1/bjpara/para/modules/scripts/cn-module.sh最后:x! bas ...