常见的media断点
landscape mode是指宽度比高度宽的模式,也就是俗称的宽屏模式;
portrait mode是指高度比宽度高的模式,也就是俗称的竖屏模式;
/*#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断点的更多相关文章
- CSS3教程:Responsive框架常见的Media Queries片段
CSS3 Media Queries片段在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段.移动端Media Queries片段iPhone5@media sc ...
- [转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用
原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因 ...
- Linux目录详细说明大全(推荐)
Linux目录详细说明大全,方便你以后合理规划及管理 "/" : 根目录Linux文件系统的入口.也是最高级,最重要的的目录.除衍生出其它目录,还和系统的开机,还原,系统修复有的, ...
- [BZOJ 1032][JSOI 2007]祖玛 题解(区间DP)
[BZOJ 1032][JSOI 2007]祖玛 Description https://www.lydsy.com/JudgeOnline/problem.php?id=1032 Solution ...
- HTTP协议初探
HTTP协议初探 HTTP协议初探 什么是http协议? 遵守协议的双方 再来回答什么是http协议 抓到这两段文本 可以总结出以下规律 HTTP 请求命令(动作,谓词 ,METHOD) GET 和 ...
- CLR 调试概述
利用公共语言运行时 (CLR) 调试 API,工具供应商可以编写调试器来调试运行于 CLR 环境中的应用程序. 要调试的代码可为 CLR 支持的任何代码种类.CLR 调试 API 主要是使用非托管代码 ...
- GDB调试-从入门到实践
你好,我是雨乐! 在上篇文章中,我们分析了线上coredump产生的原因,其中用到了coredump分析工具gdb,这几天一直有读者在问,能不能写一篇关于gdb调试方面的文章,今天借助此文,分享一些工 ...
- Media Queries 媒体查询常见设备断点
按需调整断点 一.谷歌后摘抄的一部分媒体查询 /*#region SmartPhones */ /* SmartPhones */@media only screen and (min-device- ...
- 移动端常见的不同苹果手机media query汇总
在做手机网站的时候,我经常用百分比布局,但是经常在不同的手机显示的不同 比如说,一样的东西,在iphone4(s).5(s).6.plus中都会有不同显示 有时候也想有为了某个手机单独的做一些效果,来 ...
随机推荐
- 条目十五《注意strng实现的多样性》
条目十五<注意strng实现的多样性> 下面以一个打印string空对象的大小切入本条目: #include #include using namespace std; int main( ...
- 运用CSS高斯模糊添加图片加载效果
<!DOCTYPE html> <html> <head> <title>大图片加载从模糊到清晰</title> </head> ...
- python-day15---面向对象
面向对象零:面向对象的说明: 面向过程和面向对象: 面向对象:一切以对象为中心(解决的问题本身) 面向过程:一切以过程为中心(解决问题的步骤) 面向对象我们用 “ class 类名:” 来表示面向对象 ...
- table中thead固定一直在最上面
<link rel="shortcut icon" href="favicon.ico"> <link href="css/boot ...
- Python web前端 04 盒子模型
Python web前端 04 盒子模型 盒子模型是由内容(content).内边距(padding).外边距(margin).边框(border)组成的 一.边框 border #border 边框 ...
- 1011 A+B 和 C (15 分)
#include <iostream> using namespace std; int main(){ int t; cin >> t; double a, b, c; // ...
- HihoCoder - 1048 状压DP 经典题
hihocoder题解说的十分清晰了,这份代码就是从讲解里学习的 方案数就是不断枚举合法状态下横放竖放或两者均可 合法判断的依据是记录当前行和下一行的状态 防止重复枚举的方法是先按行后按列 递归基瞎写 ...
- Apache Shiro(二)-登录认证和权限管理数据库操作
数据库支持 在上一篇中使用ini 配置文件进行了相关权限数据的配置. 但是实际工作中,我们都会把权限相关的内容放在数据库里. 所以本知识点讲解如何放在数据库里来撸. RBAC 概念 RBAC 是当下权 ...
- 1152 Google Recruitment (20 分)
In July 2004, Google posted on a giant billboard along Highway 101 in Silicon Valley (shown in the p ...
- Java - 打印质数(使用控制嵌套循环跳转)
使用控制嵌套循环跳转,打印输出10 ~ 150之间的质数 代码: public class Testcotinue { public static void main(String[] args) { ...