Question

我在网页设计方面比较陌生，我想对一般情况下的具体事情有所了解。我的页面中有一个包含图像的div（框），一旦你将其悬停，就会出现带有图像标题的子div（标题）。

在我的普通宽屏中，我完成了这个，将盒子div设置为高度：300px X宽度：500px; ，图像宽度：100％X高度：自动，标题div宽度/高度：100％。它有效，但我想问，如果我想让这个响应，我只需要为不同的媒体屏幕更改这些参数？还是有另一种方法，它可以让所有东西同时适应？什么更习惯？

Answer 1

你需要研究如何使用％和vw / vh（视口宽度单位/视口高度单位）而不是像素，因为如果你的盒子的尺寸设置为像素，它只会在你的屏幕上看起来很好设计，但不会扩展到其他屏幕。

如果您发布了代码段，则可以向您展示如何从px单位转到响应单位，例如％，vw。

Answer 2

您可以通过以百分比或vw / vh为单位设置所有元素的宽度来实现响应性。但这并不总是方便和有用。有时它会缩小你的图像根据屏幕尺寸（桌面网站的微型版本甚至会在移动设备中显示），这并不总是需要。但还有很多其他方法可以使你的网站响应。有些方法是：

您可以使用媒体查询并使用max-width属性来制作网站响应不同的分辨率和屏幕尺寸。
您可以使用可用于创建的Twitter Bootstrap 完全响应的网站

如果您有任何疑问，请发表评论。

Answer 3

感谢您的回复！我对我描述的情况做了一个小提示。我熟悉bootstrap，但我想用html / css严格执行此操作。

 <div class="box">
    <img >

    <div class="caption">
    <h1>
     This is the caption
    </h1>
    <p>
    This is the paragraph
    </p>
    </div>



       .box{
    position:relative;
    float:left;
    overflow:hidden;
    height:300px;
    width:500px;

    }

    .box img{
    width:100%;
    height:auto;
    left:0;
    position:absolute;
     transition: all 300ms ease-out;}

    .caption{
    width:100%;
    height:100%;
    left:-100%;
    position:absolute;
     transition: all 300ms ease-out;
    }

    .box:hover .caption{
    background-color: rgba(255,255,255,0.8);

      opacity: 1;
      transform: translateX(100%);

    }
    .box:hover img{


      opacity: 1;
      transform: translateX(100%);
    }

https://jsfiddle.net/wrz9uxaa/1/

在css中使事情响应

3 个答案: