关键词：
【中文标题】针对大部分智能手机的媒体查询【英文标题】：Media query to target most of smartphone 【发布时间】：2012-12-22 21:24:24 【问题描述】：我编写了一些 CSS 代码来使 HTML 页面更适合移动浏览器。为了确保我的 CSS 仅适用于手机，我使用以下媒体查询：
@media only screen and (max-device-width: 480px)
作为一名 iPhone 开发人员，我在这款设备上进行了测试，它运行良好。但我希望我的 CSS 能够在所有类型的设备（Android、Windows Phone 等）上使用。
什么是适合当今大多数智能手机的好分辨率？还是我需要更复杂的媒体查询？
【问题讨论】：
去看看这里的可用分辨率(Click me) 查看这个答案以获得类似的信息：***.com/a/7354648/1861603 @LeeMeador 这是一个非常好的工具！谢谢。 @Omega 谢谢你的链接。我看到了这个问题，但我觉得答案更多是面向 iPhone 的，而不是面向智能手机的。我通常只为 iPhone 开发，但这次不是。 【参考方案1】：更新日期：2016 年火星
项目各不相同，因此很难设置一个适合所有项目的全局规则。如果你正在寻找一个，这里有一个比我聪明的人想出的例子，我以前用过：
xsmall: (max-width: 479px),
small: (max-width: 599px),
medium: (max-width: 767px),
large: (max-width: 1024px),
largeOnly: (min-width: 768px) and (max-width: 1024px),
xxl: (min-width: 1200px),
tall: (min-height: 780px),
请注意，他们的名称中没有提及设备、屏幕尺寸或方向。 “平板电脑肖像” 的尺寸对我们来说并不重要，因为我们应该尝试让事物响应式并且在任何屏幕尺寸上看起来都不错，而不仅仅是 自适应到几种屏幕尺寸。
是的，了解最常见的屏幕尺寸并避免疯狂的媒体查询很重要，但最终，您的设计可能会开始要求调整为 530 像素而不是 480 像素或类似的东西。那为什么不呢？
现在，根据我的个人喜好：我一直牢记媒体查询，但起初我倾向于几乎完全忽略设备尺寸。我也更喜欢 desktop-first 方法，因为我发现将布局调整为更小的尺寸更容易（即：从页面中删除不那么重要的内容、减小尺寸等）。
原答案
有些人倾向于完全忽略设备尺寸。他们说你应该检查你的布局开始中断的地方，只有在必要时才创建媒体查询。其他人将检查不同的设备尺寸，就像您现在所做的那样。但随后您将有一个 320 像素的媒体查询，另一个 480 像素的媒体查询，依此类推……您可能会为此发疯，根据您的布局，甚至可能没有必要！
所以，目前我正在尝试两者兼而有之。一开始我倾向于忽略设备尺寸，并且仅在必要时（当布局中断时）创建一些媒体查询，直到它看起来适合 960 像素和更大的尺寸，以及更小的屏幕尺寸，比如 320 像素（我关心的最小设备尺寸大约）。
【讨论】：
我真的很喜欢这样的想法，即我应该专注于我的页面内容，而不是阅读我内容的设备的大小。这甚至可以解决未来设备的问题！ 是的。既然我读了马里奥的回答，我要补充的另一件事是，我还阅读了有关 Mobile First 想法的内容，但这对我来说没有多大意义。也许我只需要阅读更多关于它的内容并自己尝试一下，但是在设计方面，我认为将东西缩小（比如隐藏不太重要的东西）会更容易适应；更大的受众通常来自台式机（以及未来更大的分辨率手机）；那我为什么要从手机开始呢？这是个人观点，但移动优先的想法对我来说看起来“尴尬”，我愿意用一些好的论据来改变它=）【参考方案2】：最近我开始使用响应式网页设计和媒体查询，我没有找到一个独特的“神奇”查询，但是在阅读了很多文章和几本书之后，我采用了移动优先的方式来开发网页，我正在使用一些常见的媒体查询，这里是断点：
320 像素手机人像 480 像素移动横屏 600 px 小平板 768 px 平板电脑纵向 1024 像素平板电脑横向/上网本 1280 像素及以上 - 桌面（取自http://fluidbaselinegrid.com/）
希望对你有帮助
【讨论】：
谢谢！你知道 Galaxy S3 是否会接受 480px 的查询吗？它是 720 像素宽，所以可能不是？ 欢迎您，在我的测试中我发现（总是使用 ）Galaxy S3 有 360px 纵向, 和 640 像素（或 720 像素，抱歉记不清了）横向。您可以尝试使用媒体查询来定位许多设备，但是，在我看来，一旦定义了断点，最好使用灵活的布局来尝试覆盖所有设备，例如，如果您有一个灵活的布局，直到 480px ，它也适合 360 像素。 确实如此。在我看来，让你的布局灵活也是最好的选择，但在我看来，这也有点违背移动优先的想法和使用固定屏幕尺寸。如果您要使您的设计灵活，那么如果“布局”在这些尺寸上没有“中断”（同时是灵活的布局），那么使用 320、480、600 和 768 之类的固定中断是没有意义的。我们有一些标准要遵循，是的，但是如果布局仅在 530 像素处开始中断怎么办？为什么要关心 600px？ @7th 是的，但灵活也与断点兼容，因为也许您想根据可用的 with 更改布局结构，例如，在 480px 下可能更好 1 列布局，但在 480px 和 728px 之间有足够的空间来制作 2 列布局。当然，600px 可能是粗心的，至少每个开发人员都必须评估每个项目并尝试定义最佳选项。不同设备的媒体查询
...但仍有一些我无法理解。许多网站（1、2）建议我们在为智能手机开发时使用一些常见的断点来进行媒体查询。尽管debatebetweenpixels,emsorrems（我通常使用ems），但问题是现在智能手机的分辨率越来越高，高达1080p甚至1440p。在我 查看详情
针对 Gmail 电子邮件的 Internet Explorer 特定媒体查询或黑客攻击
】针对Gmail电子邮件的InternetExplorer特定媒体查询或黑客攻击【英文标题】：InternetExplorerspecficmediaqueryorhackforGmailemail【发布时间】：2019-12-1223:46:50【问题描述】：我正在处理电子邮件并希望切换特定于浏览器的部分。请检查以下... 查看详情
在媒体查询中更改视口
...:41:12【问题描述】：我目前正在从事响应式网页设计。“智能手机视图”还没有准备好，因为我的客户必须获得更多预算。因此，我需要实现一个临时视图，我想用一个仅在智能手机上激活的固定视口来实现它。我使用这种方式... 查看详情
最推荐用于手机和平板设备的 CSS 媒体查询 [重复]
...发布时间】：2017-03-2509:00:53【问题描述】：我想深入了解针对手机（手持）和平板电脑最推荐的CSS媒体查询。我有以下代码，我想知道它是否@mediaonlyscreenand(min-device-width:320p 查看详情
针对窄桌面而非移动设备的媒体查询
】针对窄桌面而非移动设备的媒体查询【英文标题】：mediaquerytotargetnarrowdesktopandnotmobile【发布时间】：2014-06-0910:01:30【问题描述】：假设我有以下代码：@media(max-width:1024px)divcolor:green;有没有办法在媒体查询中添加条件以排除移... 查看详情
针对移动应用到桌面的 CSS 媒体查询
】针对移动应用到桌面的CSS媒体查询【英文标题】：CSSMediaQueriestargetedformobileapplyingtodesktop【发布时间】：2014-05-2923:13:21【问题描述】：网页：www.mathias-syversen.net您好，这是我的第一篇文章，请多多关照！我正在尝试使用@media查... 查看详情
css 媒体查询以针对除 IE 之外的所有浏览器
】css媒体查询以针对除IE之外的所有浏览器【英文标题】：cssmediaquerytotargetallbrowsersexceptforIE【发布时间】：2014-09-2904:08:36【问题描述】：我正在寻找一个针对除IE之外的所有浏览器的媒体查询。例如：@media(........)有没有办法做到... 查看详情
3 个针对 iphone 纵向、横向和 ipad 纵向的媒体查询
】3个针对iphone纵向、横向和ipad纵向的媒体查询【英文标题】：3mediaqueriesforiphoneportrait,landscapeandipadportrait【发布时间】：2012-12-0407:38:28【问题描述】：我已经尝试了width和device-width的不同组合，但在iPhone上，此代码不会将背景变... 查看详情
css3@media媒体查询(代码片段)
...备。print用于打印机。screen用于计算机屏幕、平板电脑、智能手机等等。speech用于大声“读出”页面的屏幕阅读器。CSS@media规则@media规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。媒体查询可用于检查许多... 查看详情
css针对不同设备的css3媒体查询(代码片段)
媒体查询未针对小尺寸运行
】媒体查询未针对小尺寸运行【英文标题】：Mediaquerynotrunningforsmallsizes【发布时间】：2017-03-1909:18:14【问题描述】：在我的面板中，当页面大小为Fiddle@@mediaalland(min-width:768px).text-lefttext-align:center;<scriptsrc="https://ajax.googleapis.com/a... 查看详情
CSS媒体查询仅针对iOS设备[重复]
】CSS媒体查询仅针对iOS设备[重复]【英文标题】：CSSmediaquerytotargetonlyiOSdevices[duplicate]【发布时间】：2015-07-1803:04:07【问题描述】：是否有@media查询仅针对运行iOS的设备？例如：@media(min-device-width:320px)and(max-device-width:768px)#navyada:yad... 查看详情
针对特定设备的 CSS3 媒体查询
】针对特定设备的CSS3媒体查询【英文标题】：CSS3mediaqueriestotargetspecificdevice【发布时间】：2013-01-0103:19:03【问题描述】：我有一个带有基本CCS的wordpress主题，现在我想让这个设计响应下面提到的大多数使用的设备布局。我想以横... 查看详情
媒体查询中使用的宽度[关闭]
...述】：对于台式机、平板电脑、笔记本电脑/Ipad、Iphone和智能手机等所有设备，最重要的媒体查询宽度是多少？这些设备是否有任何标准宽度？【问题讨论】：并非如此。这取决于你的内容。您的网站在特定分辨率下看起来不错... 查看详情
iOS 特定媒体查询
...：2013-02-2020:02:58【问题描述】：有人知道使用媒体查询仅针对iOS设备的方法吗？我正在寻找一种方法给iPhone(1,3G,3GS,4,4S,5)用户一种体验，给iPad(1,2,3,mini)用户另一种体验，以及其他所有人（桌面、安卓、windowsphone,bb)默认体验。我... 查看详情
移动端布局之路-----rem布局(代码片段)
...媒体查询（MediaQuery）是CSS3新语法。使用@media查询，可以针对不同的媒体类型定义不同的样式@media可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对... 查看详情
css 媒体查询来处理新的高分辨率手机，同时忽略平板电脑
...间】：2012-05-3102:17:31【问题描述】：根据我的研究；新款智能手机人像分辨率高达800px平板电脑最低纵向分辨率600像素现在我正在尝试使用媒体查询将移动CSS渲染到支持高达800像素分辨率的手持设备上，但我遇到的 查看详情
视口和 CSS 媒体查询的宽度不同？
...width?【发布时间】：2013-03-1505:52:45【问题描述】：我在为智能手机创建CSS媒体查询时遇到问题，尤其是对于三星GalaxyS3等Android设备。似乎<metaname="viewport"content="width=device-width,i 查看详情