html - 使用 CSS 的响应式 div

Question

我想让这个 div 响应，但我不知道如何实现。我不想使用 Bootstrap 我想要一个简单的代码。

我还有一个问题，我想增加我尝试增加但没有结果的两个图像的大小。

<div class="cc-selector">
    <input id="visa" type="radio" name="credit-card" value="visa" />
    <label class="drinkcard-cc visa" for="visa"></label>
    <input id="mastercard" type="radio" name="credit-card"   value="mastercard" />
    <label class="drinkcard-cc mastercard"for="mastercard"></label>
</div>

CSS

.cc-selector{
position: relative;
left: 600px;
top: 250;
}
.cc-selector input{
margin:0;padding:0;
-webkit-appearance:none;
   -moz-appearance:none;
        appearance:none;
}
.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
.mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}

.cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector input:checked +.drinkcard-cc{
-webkit-filter: none;
   -moz-filter: none;
        filter: none;
 }
.drinkcard-cc{
cursor:pointer;
background-size:contain;
background-repeat:no-repeat;
display:inline-block;
width:100px;height:70px;
-webkit-transition: all 100ms ease-in;
   -moz-transition: all 100ms ease-in;
        transition: all 100ms ease-in;
-webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
   -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
        filter: brightness(1.8) grayscale(1) opacity(.7);
 }
.drinkcard-cc:hover{
-webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
   -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
        filter: brightness(1.2) grayscale(.5) opacity(.9);
 }

Answer 1

Bootstrap 定义了使布局响应的类。如果您不想使用 Bootstrap ，那么您不妨看看 CSS 中的媒体查询。使用媒体查询，您可以为响应式设计编写自己的类。例如:

@media screen and (min-width: 780px) {
    .class1{
       //define css rules on your div and images when screen size is greater than 780 px
    }
}
@media screen and (max-width: 780px) {
    .class1{
       //define css rules on your div and images when screen size is lesser than 780 px
    }
}

定义规则后，您可以将这些类添加到您的元素中。同样，您可以根据需要自定义更多和不同的屏幕尺寸。如果这对您没有帮助，请在评论中告诉我。