html - 如何使 div 块响应?
问题描述
我有以下代码,在笔记本电脑和台式机等大屏幕设备上连续列出 5 个步骤,并希望使相同的代码对移动设备和平板电脑做出响应,但在过去的 3 天里我无法让它工作。
我已经尝试过媒体查询,但它们似乎没有奏效。如何更改代码以使其响应?
.row-equal-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.p_column {
background: #fff;
color: #000;
font-size: 22px;
font-weight: 500;
margin: 5px 15px 0;
padding: 30px 15px;
border: solid 1px #d4d4d4;
box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.08);
border-radius: 2px;
position: relative;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
width: 100%;
}
.p_column:first-child {
background: #c81f56;
color: #fff;
border: solid 1px #c81f56;
}
/*Code for arrow*/
.p_column:before,
.p_column:after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 42%;
bottom: 86px;
border-style: solid;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
/* Stroke */
.p_column:before {
right: -30px;
border-left-color: #d4d4d4;
border-width: 15px;
}
/* Fill */
.p_column:after {
right: -29px;
border-left-color: #fff;
border-width: 15px;
}
.p_column p {
font-size: 16px;
line-height: 24px;
margin-bottom: 0
}
.p_column:first-child:before {
border-left-color: #c81f56;
}
.p_column:first-child:after {
border-left-color: #c81f56;
}
.p_column:last-child:before,
.p_column:last-child:after {
display: none
}
/*color change hover*/
.p_column:hover {
background: #b0b9c1;
color: #fff;
border: solid 1px #b0b9c1;
}
.p_column:hover:before {
border-left-color: #b0b9c1;
}
.p_column:hover:after {
border-left-color: #b0b9c1;
}
@media screen and (max-width: 424px) {
.steps-responsive: max-width: 100% !important;
}
@media screen and (min-width: 425px) and (max-width: 768px){
.steps-responsive: max-width: 50% !important;
}
@media screen and (min-width: 1024px){
.steps-responsive: max-width: 16.66% !important;
}
<div class="row" >
<div class="row-equal-height" >
<div class="p_column text-center">
<div class="border-4 border-gray-400 rounded-full w-16 h-16 flex justify-center items-center text-2xl font-bold">
1
</div>
<h4>
Dial Short-code.
</h4><br/>
<p>
Dial *389*0# on your mobile phone
</p>
</div>
<div class=" p_column text-center ">
<div class="border-4 border-gray-400 rounded-full w-16 h-16 flex justify-center items-center text-2xl font-bold">
2
</div>
<h4>
Enter MOMO Card Number.
</h4><br/>
<p>
Enter the 16 digits number on the card
</p>
</div>
<div class=" p_column text-center ">
<div class="border-4 border-gray-400 rounded-full w-16 h-16 flex justify-center items-center text-2xl font-bold">
3
</div>
<h4>
Enter Personal Information.
</h4><br/>
<p>
Enter your first name..
</p>
</div>
<div class=" p_column text-center ">
<div class="border-4 border-gray-400 rounded-full w-16 h-16 flex justify-center items-center text-2xl font-bold">
4
</div>
<h4>
Key in Security Pin.
</h4><br/>
<p>
Key in your preferred four-digit PIN and confirm the same PIN.
</p>
</div>
<div class=" p_column text-center ">
<div class="border-4 border-gray-400 rounded-full w-16 h-16 flex justify-center items-center text-2xl font-bold">
5
</div>
<h4>
SMS Confirmation.
</h4><br/>
<p>
An SMS message is received indicating card will be active within 48hrs.
</p>
</div>
</div>
</div>
我希望这些块在宽屏幕上保持 5 个一行,在中等屏幕上每行 2 个(平板电脑以水平模式保持),在小屏幕设备上每行 1 个。
解决方案
请将此代码添加到您的 CSS 以进行响应。
@media screen and (max-width: 1024px) {
.row-equal-height {
flex-wrap: wrap;
}
.p_column {
width: 25%;
margin: 5px 2% 0;
}
}
@media screen and (max-width: 767px) {
.p_column {
width: 100%;
}
}
推荐阅读
- python - 根据列数据转换数据框
- ios - 已解决:Firebase Cloud 向 iOS 发送静默推送通知在提示消息时不起作用
- c# - 使用带有 GUID 的 IAggregateFluentExtensions.GraphLookup() 时出现 Mongo DB BsonSerializationException
- flutter - 如何在飞镖/颤振中设置或删除地图标记
- javascript - 添加 X 轴标题会导致 Uncaught RangeError: minimumFractionDigits value is out of range in Chart.js
- java - 每次运行代码时我的文件都会清除 - Java
- c# - 我希望用户定义的字符串与布尔值相关联,以指示字符串是否设置为用户值
- bash - shell脚本中的字符串到整数的转换并返回到字符串
- flutter - 如何使用 timepicker 小部件显示使用 Flutter 的开始和结束时间
- ios - 在不指定 DispatchQueue 的情况下使用 withAnimation 会发生什么