在 css 中使事物具有响应性答案

【问题标题】：Making things responsive in css在 css 中使事物具有响应性
【发布时间】：2016-10-12 20:13:14
【问题描述】：

我是网页设计的新手，我想了解一些关于通常如何完成特定事情的意见。我的页面中有一个包含图像的 div（框），一旦将其悬停，就会出现一个带有图像标题的子 div（标题）。

在我的常规宽屏中，我完成了这个，将框 div 设置为高度：300 像素 X 宽度：500 像素；，图像宽度：100% X 高度：自动，标题 div 宽度/高度：100%。它有效，但我想问一下，如果我想让这个响应，我是否只需要为不同的媒体屏幕更改这些参数？或者有没有另一种方式，让一切都适应一次？什么比较习惯？

【问题讨论】：

欢迎来到 SO！通过提供代码示例，通常可以更快、更准确地回答问题。请阅读：How to create a Minimal, Complete, and Verifiable example
欢迎来到 Stack Overflow！这个问题要么太宽泛，要么基于观点，要么需要讨论，因此与 Stack Overflow 无关。

标签： html css

【解决方案1】：

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

如果您发布代码 sn-p，则可以向您展示如何从 px 单位转换为响应单位，例如 %、vw。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

感谢您的回复！我对我所描述的情况做了一个小提琴。我熟悉引导程序，但我想严格使用 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/

【讨论】：