Css 基于触摸功能而非视口媒体查询的样式？

tl；dr:在

.touch

类（由Modernizer添加）下定义“移动”CSS，而不是基于视口大小的媒体查询，有意义吗

我正在为一个专为桌面设计的网站创建移动风格（即页面固定在约900px宽，许多目标太小，无法触摸等）。该网站有很多表格，一些表格，没有图片/视频/图表。我无法控制HTML结构（除了JS，我希望避免使用JS），也无法对现有桌面样式进行有意义的更改

我已经编写了一个新的样式表，在必要时可以使用

max width

media查询覆盖这些样式，使其在手机和平板电脑上以纵向模式正常工作

问题是，当你将平板电脑切换到横向模式时，屏幕会变宽1024倍，这正是桌面风格应该占据主导地位的地方。然而，平板电脑仍然是一种触摸设备，我觉得“移动”风格更适合平板电脑（更大的点击目标、更好的表单字段和标签布局、非画布菜单等）。仅仅因为你旋转了设备，一个站点就突然改变了方向，这看起来很笨重

---

我是否应该在Modernizer添加的

.touch

类下范围移动样式，而不是视口宽度？从表面上看，这听起来不是个坏主意，但我知道基于视口的媒体查询是编写样式的正确方法，因此我忍不住会觉得接下来会遇到麻烦

您可能可以使用媒体查询来定位这些设备

@media only screen and and (min-device-width:~whatever~) and (max-device-width:1024px) and (orientation:landscape) {
  styles
}

---

我们还应该记住，并非所有移动设备都支持触摸，例如一些黑莓手机，因此基于Modernizer添加的.touch类启用某些功能/样式也会有所帮助。

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

在一个名为small-ough.css或其他文件中，根据平板电脑肖像大小及以下的媒体查询导入您的手机样式。找到文件。就写这一行

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

如果是触摸式设备，使用Modernizer，只需加载移动风格即可。如果不是，请触摸加载使用媒体查询决定加载移动样式的文件

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

---

那么比

（最大设备宽度：1024px）

宽的平板电脑呢？同样的语法也适用，例如

@media（最大设备宽度：1280px）和（方向：横向）{}

可以在我的意思是，大多数现代桌面浏览器也支持该媒体查询（例如，

max device width

和

orientation

）。因此，1024px或1280px的桌面显示器可以使用这些样式，但我不想使用桌面。查看一下，它将帮助您根据需要定制查询。您还可以在网站上找到有用的信息，也可以尝试使用

media=“掌上电脑”

在您的样式表链接中。我尝试过（我希望避免在桌面浏览器上加载所有移动CSS/JS），但由于首先加载桌面CSS/JS，FOUC太多。我必须看看是否也可以将Modernizer用于桌面CSS，然后加载其中一个，但决不能同时加载两个。