仅限移动设备上的自适应CSS样式 [英] Responsive css styles on mobile devices ONLY

问题描述

我正在尝试使我的自适应CSS样式只能在平板电脑和智能手机上仅使用.基本上，我有一种桌面风格，一种移动风格:肖像风格和一种移动风格:风景风格.我完全不希望移动样式干扰桌面演示.我玩过无数媒体查询，但是结果要么移动样式显示在桌面上，要么移动样式仅显示在移动设备上，但只有一组规则(无响应).有什么办法可以将两者完全分开吗?

I'm trying to make my responsive CSS styles work only on 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?

我现在拥有的代码如下:

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 */

推荐答案

您所拥有的应该可以正常工作，但是没有实际的"Is Mobile/Tablet"媒体查询，因此您总是会卡住了.

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.

为进一步解决上述问题，将Modernizr与非触摸测试配合使用将使您可以定位最有可能是平板电脑和智能手机的触摸设备，但是新版本的基于触摸屏的屏幕却不如曾经是.

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.

这篇关于仅限移动设备上的自适应CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！