仅适用于移动设备的响应式 css 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15061520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive css styles on mobile devices ONLY
提问by jaspn
I'm trying to make my responsive CSS styles work onlyon tablets and smartphones. Basically I have a style for desktop, a style for mobile: portrait and a style for mobile: landscape. I don't want the mobile styles interfering with the desktop presentation at all. I have played around with countless media queries, but the result either the mobile styles are getting displayed on the desktop, or the mobile styles are displaying only on mobile devices but with only one set of rules (non-responsive). Is there a way I can keep the two completely separate?
我试图让我的响应式 CSS 样式仅适用于平板电脑和智能手机。基本上我有一种桌面风格，一种移动风格：纵向和一种移动风格：横向。我根本不希望移动样式干扰桌面演示。我玩过无数媒体查询，但结果要么是移动样式显示在桌面上，要么移动样式仅显示在移动设备上但只有一组规则（无响应）。有什么办法可以让两者完全分开吗？
My code I have right now goes like this:
我现在的代码是这样的：
/* regular desktop styles */
@media only screen
and (max-device-width: 600px)
{ ... }
/* mobile only styles when the device is 0-600px in maximum width */
@media only screen
and (max-device-width: 1000px)
{ ... }
/* mobile only styles when the device is up to 1000px in maximum width */
采纳答案by justinavery
What's you've got there should be fine to work, but there is no actual "Is Mobile/Tablet" media query so you're always going to be stuck.
你有什么应该可以正常工作，但没有实际的“是移动/平板电脑”媒体查询，所以你总是会被卡住。
There are media queries for common breakpoints, but with the ever changing range of devices they're not guaranteed to work moving forwards.
有针对常见断点的媒体查询，但是随着设备范围的不断变化，它们不能保证向前工作。
The idea is that your site maintains the same brand across all sizes, so you should want the styles to cascade across the breakpoints and only update the widths and positioning to best suit that viewport.
这个想法是您的网站在所有尺寸上都保持相同的品牌，因此您应该希望样式跨断点级联，并且只更新宽度和位置以最适合该视口。
To further the answer above, using Modernizr with a no-touch test will allow you to target touch devices which are most likely tablets and smart phones, however with the new releases of touch based screens that is not as good an option as it once was.
为了进一步回答上述问题，使用 Modernizr 进行非触摸测试将允许您针对最有可能是平板电脑和智能手机的触摸设备，但是新版本的基于触摸的屏幕不再像以前那样好.
回答by Ran
Why not use a media query range.
为什么不使用媒体查询范围。
I'm currently working on a responsive layout for my employer and the ranges I'm using are as follows:
我目前正在为我的雇主开发响应式布局，我使用的范围如下：
You have your main desktop styles in the body of the CSS file (1024px and above) and then for specific screen sizes I'm using:
您在 CSS 文件的主体中有您的主要桌面样式（1024px 及以上），然后是我使用的特定屏幕尺寸：
@media all and (min-width:960px) and (max-width: 1024px) {
/* put your css styles in here */
}
@media all and (min-width:801px) and (max-width: 959px) {
/* put your css styles in here */
}
@media all and (min-width:769px) and (max-width: 800px) {
/* put your css styles in here */
}
@media all and (min-width:569px) and (max-width: 768px) {
/* put your css styles in here */
}
@media all and (min-width:481px) and (max-width: 568px) {
/* put your css styles in here */
}
@media all and (min-width:321px) and (max-width: 480px) {
/* put your css styles in here */
}
@media all and (min-width:0px) and (max-width: 320px) {
/* put your css styles in here */
}
This will cover pretty much all devices being used - I would concentrate on getting the styling correct for the sizes at the end of the range (i.e. 320, 480, 568, 768, 800, 1024) as for all the others they will just be responsive to the size available.
这将涵盖几乎所有正在使用的设备 - 我将专注于为范围末尾的尺寸（即 320、480、568、768、800、1024）设置正确的样式，而对于所有其他设备，它们只会是响应可用的大小。
Also, don't use px anywhere - use em's or %.
另外，不要在任何地方使用 px - 使用 em 或 %。
回答by Alan Bellows
I had to solve a similar problem--I wanted certain styles to only apply to mobile devices in landscape mode. Essentially the fonts and line spacing looked fine in every other context, so I just needed the one exception for mobile landscape. This media query worked perfectly:
我必须解决一个类似的问题——我希望某些样式仅适用于横向模式的移动设备。本质上，字体和行距在所有其他上下文中看起来都很好，所以我只需要移动横向的一个例外。这个媒体查询工作得很好：
@media all and (max-width: 600px) and (orientation:landscape)
{
/* styles here */
}
回答by Raptor
Yes, this can be done via javascript feature detection ( or browser detection , e.g. Modernizr) . Then, use yepnope.jsto load required resources ( JS and/or CSS )
是的，这可以通过 javascript 功能检测（或浏览器检测，例如Modernizr）来完成。然后，使用yepnope.js加载所需的资源（ JS 和/或 CSS ）
