热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

移动端媒体查询的一些尺寸参考

移动端媒体查询的一些尺寸参考*iphone44s*@mediaonlyscreenand(device-height:480px)and(-webkit-device-pixel-

移动端媒体查询的一些尺寸参考

/*iphone4 4s*/

@media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){

/* Styles */

}

@media screen and (min-width: 320px) and (max-width: 480px) {

/* Styles */

}

 

/*iphone5*/

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){

/* Styles */

}

 

/*iphone6*/

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){

/* Styles */

}

 

/*iphone6+*/

@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){

/* Styles */

}

 

/* iPads (portrait)  */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait) {

/* Styles */

}

/* iPads (landscape)  */

 

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape) {

/* Styles */

}

 

/* iPads (portrait and landscape) */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px) {

/* Styles */

}

 

/*魅族*/

@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){

/* Styles */

 }

 

/*mate7*/

@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){

/* Styles */

 }

 

/* 平板之类的宽度 1024 以下设备 */

@media only screen and (min-width: 321px) and (max-width: 1024px) {

/* Styles */

}

 

/* PC客户端或大屏幕设备: 1028px 至更大 */

@media only screen and (min-width: 1029px) {

/* Styles */

}

 

/* 竖屏 */

@media screen and (orientation:portrait) and (max-width: 720px) {

/* Styles */

}

 

/* 横屏 */

@media screen and (orientation:landscape) and (min-width : 480px){

/* Styles */

}

 

常规尺寸详细适配

@media screen and (min-width: 320px) { }

@media screen and (min-width: 360px) { }

@media screen and (min-width: 375px) { }

@media screen and (min-width: 400px) { }

@media screen and (min-width: 414px) { }

@media screen and (min-width: 440px) { }

@media screen and (min-width: 480px) { }

@media screen and (min-width: 520px) { }

@media screen and (min-width: 560px) { }

@media screen and (min-width: 600px) { }

@media screen and (min-width: 640px) { }

@media screen and (min-width: 680px) { }

@media screen and (min-width: 720px) { }

@media screen and (min-width: 760px) { }

@media screen and (min-width: 800px) { }

@media screen and (min-width: 960px) { }

 

注意事项:

width 指的是可视区域的宽度,当页面 scale 被设置成 0.5 时,其值会放大一倍。

device-width 是设备实际的宽度,不会随着屏幕的旋转而改变,因此并不适合开发响应式网站。

比如 iphone5s 的屏幕分辨率宽为 640,由于 retina 显示策略,当 scale 设置为1的时候,对应的media 中取到的 width 为320,当 scale 设置为0.5的时候,width为640,而 device-width 始终是320。

 

总结

1.device-width 只和设备的分辨率有关,一般是分辨率/设备像素比,且不会随着手机旋转而改变其值

2.width 会和 viewport 的 scale 属性相关,为页面的可视区域的宽度



推荐阅读
  • 本文详细探讨了代码中 `position` 属性的使用方法及其常见问题,并提出了多种有效的解决方案。通过实例分析,文章不仅解释了 `position` 属性的不同值(如 `static`、`relative`、`absolute` 和 `fixed`)在不同场景下的应用,还讨论了其对布局和定位的影响。此外,文章还提供了一些实用的调试技巧和最佳实践,帮助开发者更好地理解和应用这一重要 CSS 属性。 ... [详细]
  • C#中实现高效UDP数据传输技术
    C#中实现高效UDP数据传输技术 ... [详细]
  • Ext JS MVC系列一:环境搭建与框架概览
    本文主要介绍了如何在项目中使用Ext JS 4作为前端框架,并详细讲解了Ext JS 4的MVC开发模式。文章将从项目目录结构、相关CSS和JS文件的引用以及MVC框架的整体认识三个方面进行总结。 ... [详细]
  • 深入解析 Lifecycle 的实现原理
    本文将详细介绍 Android Jetpack 中 Lifecycle 组件的实现原理,帮助开发者更好地理解和使用 Lifecycle,避免常见的内存泄漏问题。 ... [详细]
  • 本文介绍了如何利用 `matplotlib` 库中的 `FuncAnimation` 类将 Python 中的动态图像保存为视频文件。通过详细解释 `FuncAnimation` 类的参数和方法,文章提供了多种实用技巧,帮助用户高效地生成高质量的动态图像视频。此外,还探讨了不同视频编码器的选择及其对输出文件质量的影响,为读者提供了全面的技术指导。 ... [详细]
  • 您的数据库配置是否安全?DBSAT工具助您一臂之力!
    本文探讨了Oracle提供的免费工具DBSAT,该工具能够有效协助用户检测和优化数据库配置的安全性。通过全面的分析和报告,DBSAT帮助用户识别潜在的安全漏洞,并提供针对性的改进建议,确保数据库系统的稳定性和安全性。 ... [详细]
  • 浏览器作为我们日常不可或缺的软件工具,其背后的运作机制却鲜为人知。本文将深入探讨浏览器内核及其版本的演变历程,帮助读者更好地理解这一关键技术组件,揭示其内部运作的奥秘。 ... [详细]
  • 本文详细介绍了一种利用 ESP8266 01S 模块构建 Web 服务器的成功实践方案。通过具体的代码示例和详细的步骤说明,帮助读者快速掌握该模块的使用方法。在疫情期间,作者重新审视并研究了这一未被充分利用的模块,最终成功实现了 Web 服务器的功能。本文不仅提供了完整的代码实现,还涵盖了调试过程中遇到的常见问题及其解决方法,为初学者提供了宝贵的参考。 ... [详细]
  • 本文探讨了如何在社交媒体平台上高效地获取和管理好友列表。通过分析当前流行的社交应用,如微信、Facebook等,提出了一系列实用的方法和技巧,帮助用户优化好友管理流程,提升社交体验。文章还介绍了相关工具和插件,以进一步简化操作步骤,确保用户能够快速、准确地管理和维护好友关系。 ... [详细]
  • 本文介绍了如何在 macOS 上安装 HL-340 USB 转串口驱动,并提供了详细的步骤和注意事项。包括下载驱动、关闭系统完整性保护、安装驱动以及验证安装的方法。 ... [详细]
  • 详解 Qt 串口通信程序全程图文 (4)
    Qt串口通信程序全程图文是本文介绍的内容,本文一开始先讲解对程序的改进,在文章最后将要讲解一些重要问题。1、在窗口中加入一些组合框ComboBox&# ... [详细]
  • 基于Web的Kafka管理工具Kafkamanager首次访问Web界面的详细配置指南(附图解)
    首次访问Kafkamanager Web界面时,需要对Kafka集群进行配置。这一过程相对简单,用户只需依次点击【Cluster】>【Add Cluster】,按照提示完成相关设置即可。本文将通过图文并茂的方式,详细介绍每一步的配置步骤,帮助用户快速上手Kafkamanager。 ... [详细]
  • 如何在Linux服务器上配置MySQL和Tomcat的开机自动启动
    在Linux服务器上部署Web项目时,通常需要确保MySQL和Tomcat服务能够随系统启动而自动运行。本文将详细介绍如何在Linux环境中配置MySQL和Tomcat的开机自启动,以确保服务的稳定性和可靠性。通过合理的配置,可以有效避免因服务未启动而导致的项目故障。 ... [详细]
  • 在CentOS 7环境中安装配置Redis及使用Redis Desktop Manager连接时的注意事项与技巧
    在 CentOS 7 环境中安装和配置 Redis 时,需要注意一些关键步骤和最佳实践。本文详细介绍了从安装 Redis 到配置其基本参数的全过程,并提供了使用 Redis Desktop Manager 连接 Redis 服务器的技巧和注意事项。此外,还探讨了如何优化性能和确保数据安全,帮助用户在生产环境中高效地管理和使用 Redis。 ... [详细]
  • 如何在Windows内置的Ubuntu系统中更改SSH服务的端口号设置
    如何在Windows内置的Ubuntu系统中更改SSH服务的端口号设置 ... [详细]
author-avatar
小海豚1977
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有