V2EX 首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐书目
黑客与画家
REWORK 简体中文版
REWORK 精装原版
深入浅出设计模式 Head First Design Patterns
代码之美 Beautiful Code
数据之美 Beautiful Data
信息论、编码与密码学
Free as in Freedom
设计原本
精通正则表达式
V2EX  ›  程序员

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

  •  
  •   wenxiang0207 · 4 天前 · 349 次点击
    求前端大神, 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 条附言  ·  4 天前
    自适应问题解决了,新的问题是各浏览器不兼容, IE 和 Edge 无法显示第三张图图片但是动画正常, chrome 都能正常显示 但是动画有时会失效
    9 回复  |  直到 2017-04-21 18:20:37 +08:00
        1
    wenxiang0207   4 天前
    图片文件只要大于 800*600 就行了,这个模块研究了半天,那个平移都动画像大姨妈一样 鼠标动作慢一点是可以的 要是速度抽离或 hover ,它就会失效,头疼。
        2
    pubby   4 天前 via Android   ♥ 1
    width 。不是 widh

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