在css中使事物响应性

Question

我在网页设计方面相当新手，我想要一些关于如何具体的事情通常是做一些意见。我的页面中有一个包含图像的div (框)，当您将鼠标悬停在它上时，会出现一个带有图像标题的子div(标题)。

在我的普通宽屏中，我做到了这一点，设置了方框div高度:300px X width:500px；，图像a width:100%X height:auto，以及标题div width/height:100%。它可以工作，但我想问，如果我想让它响应，我只是必须为不同的媒体屏幕更改这些参数吗？还有没有别的方法，可以让所有的东西同时自适应呢？更习惯的是什么？

Answer 1

您需要研究如何使用%和vw/vh (视口宽度单位/视口高度单位)，而不是像素，因为如果您的长方体的尺寸以像素为单位设置，它只会在您设计的屏幕上看起来很好，但不会缩放到其他屏幕。

如果你张贴一个代码片段，它将有可能向你展示如何从px单位转到响应单位，如%，vw。

Answer 2

您可以通过以百分比或vw/vh的形式设置所有元素的宽度来实现响应。但这并不总是方便和useful.Sometimes它缩小你的图像根据屏幕大小(一个桌面网站的缩略版将显示，即使在手机上)，这并不总是desired.But，有许多其他的方法来使你的网站响应。以下是一些方法：

1. 您可以使用媒体查询和最大宽度属性来使站点响应不同的分辨率和屏幕大小。
2. 您可以使用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/