V2EX 首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Sponsored by
UCloud
UCloud 爆款云主机
UCloud 再获 9.6 亿元 D 轮融资,有钱、任性、撒福利!爆款云主机,2核 / 2G / 2M 独享带宽 / 50G 高性能云盘,低至 99 元/月,且优惠补贴期长达 1 年!V2EX 社区用户使用活动码 v2ex-ucloud 注册 UCloud,再送 100 元代金券!
Promoted by UCloud
V2EX  ›  程序员

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

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

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