使事物在CSS中響應

Question

我是網頁設計的新手，我想就通常如何完成特定工作提出一些意見。 我的頁面上有一個包含圖像的div（框），一旦將其懸停，就會出現帶有圖像標題的子div（標題）。

在我的常規寬屏中，我將框div設置為高度：300px X寬度：500px； ，圖片的寬度為：100％X高度：自動，標題div寬度/高度：100％。 它可以工作，但是我想問一下，如果我想對此做出響應，是否只需要針對不同的媒體屏幕更改這些參數？ 還是有另一種方法可以使所有內容立即自適應？ 有什么比較習慣的？

Answer 1

您需要研究如何使用％和vw / vh（視口寬度單位/視口高度單位）而不是像素，因為如果您將框的尺寸設置為像素，那么它只會在您要設計的屏幕上看起來不錯，但不會縮放到其他屏幕。

如果您發布代碼段，則可以向您展示如何從px單位轉換為響應單位，例如％，vw。

Answer 2

您可以通過以百分比或vw / vh設置所有元素的寬度來實現響應。 但這並不總是方便和有用的，有時它會根據屏幕尺寸縮小圖像（即使在移動設備上也會顯示桌面站點的微型版本），但這並不總是所希望的。但是還有許多其他方法可以使您的網站響應。 一些方法是：

1. 您可以使用媒體查詢，並使用max-width屬性使網站響應不同的分辨率和屏幕尺寸。
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/