响应式设计的几点 hover 疑惑。
这是一个创建于 4254 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近完成了一项响应式设计的项目。不过在项目完成后，才发现，有些地方百思不得其解。
响应式是依靠媒体查询（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是否不科学？
响应式是依靠媒体查询（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是否不科学？
 | 1 alexapollo 2014-02-16 11:03:48 +08:00 一直没有用hover，click click click |
 | 2 kmvan OP @alexapollo 下拉菜单怎么click？父项有link，子项也有link，如果手机点父项，就直接跳转到父项页面了，子项还没来得及显示…… |
 | 3 guchengf 2014-02-16 11:32:22 +08:00 via Android 你可以换个思路，将父按钮分为两个部分，一个部分作为父link，另一个部分触发子link，类似于很多框架提供的组合式按钮 |
 | 4 scarlex 2014-02-16 11:32:58 +08:00 |
 | 6 chairuosen 2014-02-16 11:52:33 +08:00 via Android 我记得在触屏上第一次点会触发hover，第二次点会触发click 好像是js的hover |
 | 7 refresh 2014-02-16 12:55:46 +08:00 touch: function(){ if(window.Touch){ //listener touchstart/touchmove/touchend }else{ //listener hover } } $('#menu a').touch(); |
| 8 alexapollo 2014-02-16 13:18:07 +08:00 @kmvan 参考可汗学院，非常成熟的模式了 |
Select Language