前端两个问题：使用 media 无法实现响应式布局； CSS 平移动画时而有用，时而失效。
wenxiang0207 · 2017-04-21 16:50:33 +08:00 · 2990 次点击这是一个创建于 2804 天前的主题，其中的信息可能已经有所发展或是发生改变。
求前端大神， 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>
<!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
 |
1
wenxiang0207 OP 图片文件只要大于 800*600 就行了，这个模块研究了半天，那个平移都动画像大姨妈一样 鼠标动作慢一点是可以的 要是速度抽离或 hover ，它就会失效，头疼。
|
 |
2
pubby 2017-04-21 17:04:30 +08:00 via Android  1
width 。不是 widh
不用 ide 吗？ |
 |
3
leisure 2017-04-21 17:04:33 +08:00
你检查过 width 的拼写么
|
|
4
leisure 2017-04-21 17:07:10 +08:00 1
第一个问题没重现。。或者是我没理解啥是大姨妈？
|
|
5
wenxiang0207 OP @pubby 谢谢 嗯 txt 写的 公司不让用 DW 只有 VS 因为模块简单就生写了
|
|
6
wenxiang0207 OP @leisure 就是说鼠标第一次点上去能实现 3.5 秒的 transl 效果 鼠标离开数秒后 在放到上面也没问题，但是如果离开后 1s ，也就是说我的 P 刚回到原来位置（-150px ， 0px ）后 马上再去点图片 他就会直接到目标位置（ 0px,0px ）而不使用 transition 动画
|
|
7
wenxiang0207 OP @leisure 而且问题是 只有 chrome 这样 IE Edge 都正常
|
|
8
wenxiang0207 OP 更恐怖的是， chrome 可以显示第三张图片， IE Edge 不行
|
 |
9
geelaw 2017-04-21 18:20:37 +08:00
可以试试 VSC ……另外贴代码不是应该放 jsfiddle 什么的么，这么放一坨也没有把各种内容（ HTML/CSS ）分开，也没有把出问题代码最小化，真当 V2EX 你同事的聚集地啊
|
Select Language