响应式设计的几点 hover 疑惑。

[kmvan]

最近完成了一项响应式设计的项目。不过在项目完成后，才发现，有些地方百思不得其解。

响应式是依靠媒体查询（media）来实现不同屏幕width下调用不同的样式，这问题就来了。
1. 手机或pad等设备是没有鼠标，也就是是手指和网页直接接触，所以网页hover之类的功能就显得冗余了。对吗？

2. 我的项目是使用基于 unSemantic 响应式框架，同样是以浏览器的width为基础判断设备。desktop是 >1024，tablet 是 < 1024 和 > 768，mobile是 < 768，但现在的手机或pad的分辨率调越来越大了，连1920p都有了，那在desktop界面下设计的hover功能，就更显得不好权衡。例如菜单的下拉子项，一般情况下是鼠标移动父项，子项就以下拉的形式显示，而在大于1024p的移动设备，由于hover体验非常糟糕，就不能用移动显示下拉的形式了。

3. 所以在高分辨率下的移动设备，和普通PC之间，大家是怎么权衡hover的设计？仅仅依靠media是否不科学？

[alexapollo]

一直没有用hover，click click click

[kmvan]

@alexapollo 下拉菜单怎么click？父项有link，子项也有link，如果手机点父项，就直接跳转到父项页面了，子项还没来得及显示……

[guchengf]

你可以换个思路，将父按钮分为两个部分，一个部分作为父link，另一个部分触发子link，类似于很多框架提供的组合式按钮

[scarlex]

@kmvan
你可以试试在父项 link 的旁边加个小 icon，点击那个 icon 才会展开子项。
然后这个 icon 在高分辨率下隐藏，低分辨率下显示。
我觉得应该可行

[scarlex]

@guchengf
哈哈，我们都是同样的思路

[chairuosen]

我记得在触屏上第一次点会触发hover，第二次点会触发click 好像是js的hover

[refresh]

touch: function(){
if(window.Touch){
//listener touchstart/touchmove/touchend
}else{
//listener hover
}
}

$('#menu a').touch();

[alexapollo]

@kmvan 参考可汗学院，非常成熟的模式了