css - 基于触摸功能而不是视口(viewport)媒体查询的样式？

Question

tl;dr:将“移动”CSS 的范围置于 .touch 类(由 Modernizr 添加)而不是基于视口(viewport)大小的媒体查询是否有意义？

我正在为设计为仅限桌面的网站创建移动样式(即页面固定为约 900 像素宽，许多目标对于触摸来说太小，等等)。该网站有很多表格、一些表格，但没有图像/视频/图表。我无法控制 HTML 结构(除了 JS，我想避免这种情况)，而且我无法对现有的桌面样式进行有意义的更改。

我已经编写了一个新的样式表，它在必要时覆盖了那些样式，以使其在手机和平​​板电脑上使用 max-width 媒体查询以纵向模式正常工作。

问题是，当您将平板电脑切换到横向模式时，屏幕变为 1024px 宽，桌面样式应该接管。然而，平板电脑仍然是一种触摸设备，我觉得“移动”风格更适合平板电脑(更大的点击目标、更好的表单字段和标签布局、非 Canvas 菜单等)。仅仅因为您旋转了设备，网站就突然发生变化，这看起来很笨拙而且让人迷失方向。

我应该将移动样式的范围限定在 Modernizr 添加的 .touch 类下，而不是视口(viewport)宽度吗？从表面上看，这听起来不是个坏主意，但我又一次知道基于视口(viewport)的媒体查询是编写样式的正确方法，所以我忍不住觉得我会遇到麻烦。

Answer 1

您可以使用 Modernizr 在两个样式表之间进行选择以进行加载。

在一个名为 small-enough.css 之类的文件中，根据平板电脑纵向尺寸及以下尺寸的媒体查询导入您的移动样式。找到文档 here .只需包含这一行即可。

    @import path/your-mobile-styles.css @media (max-width: [tablet portrait width]);

然后使用 modernizr，如果它是触摸设备，只需加载移动样式。如果不是触摸加载，则使用媒体查询决定加载移动样式的文件。

    Modernizr.load({
      test: Modernizr.touch,
      yep : 'your-mobile-styles.css',
      nope: 'small-enough.css'
    });