V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
kmvan
V2EX  ›  问与答

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

  •  
  •   kmvan · 2014-02-16 11:01:34 +08:00 · 2900 次点击
    这是一个创建于 3933 天前的主题,其中的信息可能已经有所发展或是发生改变。
    最近完成了一项响应式设计的项目。不过在项目完成后,才发现,有些地方百思不得其解。

    响应式是依靠媒体查询(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是否不科学?
    8 条回复    1970-01-01 08:00:00 +08:00
    alexapollo
        1
    alexapollo  
       2014-02-16 11:03:48 +08:00
    一直没有用hover,click click click
    kmvan
        2
    kmvan  
    OP
       2014-02-16 11:06:48 +08:00
    @alexapollo 下拉菜单怎么click?父项有link,子项也有link,如果手机点父项,就直接跳转到父项页面了,子项还没来得及显示……
    guchengf
        3
    guchengf  
       2014-02-16 11:32:22 +08:00 via Android
    你可以换个思路,将父按钮分为两个部分,一个部分作为父link,另一个部分触发子link,类似于很多框架提供的组合式按钮
    scarlex
        4
    scarlex  
       2014-02-16 11:32:58 +08:00
    @kmvan
    你可以试试在父项 link 的旁边加个小 icon,点击那个 icon 才会展开子项。
    然后这个 icon 在高分辨率下隐藏,低分辨率下显示。
    我觉得应该可行
    scarlex
        5
    scarlex  
       2014-02-16 11:33:49 +08:00
    @guchengf
    哈哈,我们都是同样的思路
    chairuosen
        6
    chairuosen  
       2014-02-16 11:52:33 +08:00 via Android
    我记得在触屏上第一次点会触发hover,第二次点会触发click 好像是js的hover
    refresh
        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();
    alexapollo
        8
    alexapollo  
       2014-02-16 13:18:07 +08:00
    @kmvan 参考可汗学院,非常成熟的模式了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2654 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 05:23 · PVG 13:23 · LAX 21:23 · JFK 00:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.