仅适用于移动设备的响应式 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 */

推荐答案

你有什么应该可以正常工作，但没有实际的是移动/平板电脑"媒体查询，所以你总是会卡住了.

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屋！