V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
wenxiang0207
V2EX  ›  程序员

前端两个问题:使用 media 无法实现响应式布局; CSS 平移动画时而有用,时而失效。

  •  
  •   wenxiang0207 · 2017-04-21 16:50:33 +08:00 · 2957 次点击
    这是一个创建于 2776 天前的主题,其中的信息可能已经有所发展或是发生改变。
    求前端大神, demo 如下:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="applicable-device"content="pc,mobile"/>
    </head>
    <body>
    <style>
    body,figure,img,figcaption{padding:0px;margin:0px;}
    figure{position:relative;width:33.33%;overflow:hidden;height:350px;float:left;}
    figcaption{position:absolute;bottom:0px;left:0px;}
    figcaption h1{font-family:"黑体";color:white;margin-left:40px}
    img{opacity:0.9;transition:all 0.35s;}
    figcaption p{background-color:white;width:90px;text-align:center;font-family:"微软雅黑";margin-left:50px;transform:translate(-150px,0px);
    }
    figure figcaption p{transition:all 0.35s;}
    figure:hover p{transform:translate(0px,0px)}
    figcaption p:nth-of-type(1){transition-delay:0.05s}
    figcaption p:nth-of-type(2){transition-delay:0.1s}
    figcaption p:nth-of-type(3){transition-delay:0.15s}
    figure img{transform:translate(-50px,0px)}
    figure:hover img{transform:translate(0px,0px);opacity:0.6}
    @media screen and (max-widh:600px){
    figure{width:100%}
    }
    @media screen and (min-width:601px) and (max-widh:1000px){
    figure{width:50%}
    }
    @media screen and (min-widh:1001px){
    figure{width:33.33%}
    }
    </style>
    <div class="weather">
    <figure>
    <img src="boracay-island-picture-galleries.jpg"/>
    <figcaption>
    <h1>你好,世界!</h1>
    <p>关于 DEV</p>
    <p>关于 PM</p>
    <p>关于全栈</p>
    </figcaption>
    </figure>
    <figure>
    <img src="288206704-jpg.jpg"/>
    <figcaption>
    <h1>你好,世界!</h1>
    <p>关于 DEV</p>
    <p>关于 PM</p>
    <p>关于全栈</p>
    </figcaption>
    </figure>
    <figure>
    <img src="Nick-Simpson----Forth-Road-and-Forth-Rail-Bridges-xxlarge.jpg"/>
    <figcaption>
    <h1>你好,世界!</h1>
    <p>关于 DEV</p>
    <p>关于 PM</p>
    <p>关于全栈</p>
    </figcaption>
    </figure>
    </div>
    </body>
    </html>
    第 1 条附言  ·  2017-04-21 17:24:30 +08:00
    自适应问题解决了,新的问题是各浏览器不兼容, IE 和 Edge 无法显示第三张图图片但是动画正常, chrome 都能正常显示 但是动画有时会失效
    9 条回复    2017-04-21 18:20:37 +08:00
    wenxiang0207
        1
    wenxiang0207  
    OP
       2017-04-21 16:55:10 +08:00
    图片文件只要大于 800*600 就行了,这个模块研究了半天,那个平移都动画像大姨妈一样 鼠标动作慢一点是可以的 要是速度抽离或 hover ,它就会失效,头疼。
    pubby
        2
    pubby  
       2017-04-21 17:04:30 +08:00 via Android   ❤️ 1
    width 。不是 widh

    不用 ide 吗?
    leisure
        3
    leisure  
       2017-04-21 17:04:33 +08:00
    你检查过 width 的拼写么
    leisure
        4
    leisure  
       2017-04-21 17:07:10 +08:00   ❤️ 1
    第一个问题没重现。。或者是我没理解啥是大姨妈?
    wenxiang0207
        5
    wenxiang0207  
    OP
       2017-04-21 17:13:19 +08:00
    @pubby 谢谢 嗯 txt 写的 公司不让用 DW 只有 VS 因为模块简单就生写了
    wenxiang0207
        6
    wenxiang0207  
    OP
       2017-04-21 17:16:58 +08:00
    @leisure 就是说鼠标第一次点上去能实现 3.5 秒的 transl 效果 鼠标离开数秒后 在放到上面也没问题,但是如果离开后 1s ,也就是说我的 P 刚回到原来位置(-150px , 0px )后 马上再去点图片 他就会直接到目标位置( 0px,0px )而不使用 transition 动画
    wenxiang0207
        7
    wenxiang0207  
    OP
       2017-04-21 17:20:32 +08:00
    @leisure 而且问题是 只有 chrome 这样 IE Edge 都正常
    wenxiang0207
        8
    wenxiang0207  
    OP
       2017-04-21 17:21:31 +08:00
    更恐怖的是, chrome 可以显示第三张图片, IE Edge 不行
    geelaw
        9
    geelaw  
       2017-04-21 18:20:37 +08:00
    可以试试 VSC ……另外贴代码不是应该放 jsfiddle 什么的么,这么放一坨也没有把各种内容( HTML/CSS )分开,也没有把出问题代码最小化,真当 V2EX 你同事的聚集地啊
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5972 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 02:54 · PVG 10:54 · LAX 18:54 · JFK 21:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.