摘要:涂聚文涂聚文
</>复制代码
Media Queries: How to target desktop, tablet and mobile? - /*
- 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) {
- }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/1913.html
摘要:布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明,并提供相关解决方案的参考链接,涉及到三栏式布局,负,清除浮动,居中布局,响应式设计,布局,等等。 CSS 布局经典问题初步整理 标签 : 前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明,并提供相关解决方案的参考链接,涉及到三栏式布局,负 margin,清除浮动,居中布局,响应式设计,Fl...
摘要:本文响应式开发中合理选定媒体查询分割点翻译自的一文。本文从属于笔者的前端入门与最佳实践中的响应式开发系列文章。声明式编程应用到中即是应当定义,而不是。我们上面讨论过的一个关于分割点的容易混淆之处就是分割点同时代表了某个范围。 本文响应式开发中合理选定CSS媒体查询分割点翻译自David Gilbertson的The-100%-Correct-Way-To-Do-CSS-breakpoi...
摘要:一些浏览器支持嵌套媒体查询,例如,和但是和目前并没有支持嵌套媒体查询。因此,一方面,我们有一个断点管理器从断点的全局中选择并处理错误消息,另一方面有一个断点管理器允许使用多查询条件。 如果你对 Sass不太熟悉的话,你可能不知道Sass增加了许多非常有趣的功能,例如媒体查询(即 @media)功能(经常被成为 Media Merging媒体合并)。 showImg(https://se...
摘要:的地址是一个可以用来检测设备的平台操作系统和方向的库。通过操作系统比如,安卓,黑莓,,,方向横屏或者竖屏,类型平板或者移动设备,来为设备添加并且它还提供了一些函数用来判断设备。比如在端打开引入了的页面时会在标签里添加的。 decice.js的github地址 device.js是一个可以用来检测设备的平台、操作系统和方向的JavaScript库。device.js 通过操作系统(比如 ...
阅读 2743·2021-11-11 16:55
阅读 775·2021-09-04 16:40
阅读 3162·2019-08-30 15:54
阅读 2728·2019-08-30 15:54
阅读 2505·2019-08-30 15:46
阅读 488·2019-08-30 15:43
阅读 3305·2019-08-30 11:11
阅读 3059·2019-08-28 18:17