如何使桌面和移动设备响应？
问题描述：
我已经使用CSS和Bootstrap做了这个设计。我也在使用Bootstrap。发生的问题是这没有响应。任何人都可以帮助我做出响应？如何使桌面和移动设备响应？
HTML：
.ordering .spanone {
position: absolute;
width: 100px;
left: 43%;
right: 50%;
font-size: 25px;
top: 12%;
}
.ordering .spananother {
position: absolute;
width: 138px;
left: 35%;
right: 50%;
font-size: 16px;
top: 35%;
}
.ordering .spanthird {
position: absolute;
width: 138px;
top: 45%;
left: 39%;
right: 50%;
font-size: 16px;
}
.ordering .spanfourth {
position: absolute;
width: 138px;
top: 55%;
left: 35%;
right: 50%;
font-size: 16px;
}
.ordering .spanfifth {
position: absolute;
width: 229px;
top: 66%;
left: 24%;
right: 50%;
font-size: 16px;
}
.orange {
vertical-align: middle;
color: white;
position: relative;
background-color: #4C4245;
height: 226px !important;
width: 336px !important;
z-index: 3;
border-bottom-left-radius: 43%;
float: right;
margin-right: 2px;
}
.orange:after {
content: '';
position: absolute;
left: 100%;
width: 0;
height: 0;
border-top: solid 113px transparent;
border-bottom: solid 113px transparent;
border-left: solid 109px #4C4245;
}
.green {
color: white;
position: relative;
background-color: #eaeaea;
height: 226px !important;
width: 380px !important;
z-index: 2;
margin-right: 50px;
margin-top: 2px;
float: right;
}
.green:after {
content: '';
position: absolute;
left: 100%;
width: 0;
height: 0;
border-top: solid 113px transparent;
border-bottom: solid 113px transparent;
border-left: solid 112px #eaeaea;
}
.green:before {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: solid 113px transparent;
border-bottom: solid 113px transparent;
border-left: solid 112px white;
}
.blue {
color: white;
position: relative;
background-color: #ededed;
height: 226px !important;
width: 383px !important;
border-top-right-radius: 50%;
float: right;
margin-right: 100px;
}
.blue:after {
content: '';
position: absolute;
top: 100%;
left: 100%;
margin-left: 250px;
width: 0;
height: 0;
}
.blue:before {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: solid 115px transparent;
border-bottom: solid 115px transparent;
border-left: solid 111px white;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row margin-bottom-30 margin-top-20 ordering" style="margin-top:38px;margin-bottom:38px;">
<div class="col-lg-4">
<div class="orange">
<span class="spanone">Step 1</span>
<span class="spananother">Send us your file &</span>
<span class="spanthird">Project Details,</span>
<span class="spanfourth">You will recieve a</span>
<span class="spanfifth">customized estimated link back</span>
</div>
</div>
<div class="col-lg-4">
<div class="green">
<span class="spanone" style="color:#4C4245">Step 2</span>
<span class="spananother" style="color:#4C4245;width:180px">Click "Make my Sign" on</span>
<span class="spanthird" style="color:#4C4245">the estimated link,</span>
<span class="spanfourth" style="color:#4C4245;left:39%">You will recieve a</span>
<span class="spanfifth" style="color:#4C4245;left:26%;width:251px;">customized completed notification</span>
</div>
</div>
<div class="col-lg-4">
<div class="blue">
<span class="spanone" style="color:#4C4245">Step 3</span>
<span class="spananother" style="color:#4C4245;width:180px">Click "Ship my Sign" on</span>
<span class="spanthird" style="color:#4C4245;left:45%">the completion,</span>
<span class="spanfourth" style="color:#4C4245;left:45%">notification link</span>
<span class="spanfifth" style="color:#4C4245;left:26%;width:251px;">Your new sign is on its way-!!</span>
</div>
</div>
</div>我知道如何使用媒体查询做到这一点，但我想用最小的媒体查询，以保持它的响应。
我已经使用CSS
答
使用引导类COL-XS与所有COL-LG作出这样的形象：
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
rest of tag goes here...
</div>
+0
我正在使用col-lg-12，但问题是它不会使它在每个桌面上都显示相同。 – John
+0
您需要使用所有类“col-md-12，col-sm-12，col-xs-12”。它会管理 –
+0
你可以参考这个：https：//www.w3schools.com/bootstrap/bootstrap_grid_basic.asp –
答
引导提供类为响应式设计。 您已使用仅适用于大屏幕的“col-lg-4”，您需要添加“col-md-4，col-sm-4或col-xs-4 “取决于你的要求。
所以，只需在col-lg-4旁添加不同的col-classes，你的代码就可以完全适用于响应。
**
<div class="col-lg-4 col-sm-4">
"Your code"
</div>
**
答
试试这个。我尽力了。请检查。
.ordering span{
font-size:16px;
}
.ordering .spanone {
position: absolute;
width: 100px;
left: 43%;
right: 50%;
font-size: 25px;
top: 12%;
}
.ordering .spananother {
position: absolute;
width: 138px;
left: 35%;
right: 50%;
top: 35%;
}
.ordering .spanthird {
position: absolute;
width: 138px;
top: 45%;
left: 39%;
right: 50%;
}
.ordering .spanfourth {
position: absolute;
width: 138px;
top: 55%;
left: 35%;
right: 50%;
}
.ordering .spanfifth {
position: absolute;
width: 229px;
top: 66%;
left: 24%;
right: 50%;
}
.orange {
vertical-align: middle;
color: white;
position: relative;
background-color: #4C4245;
height: 226px !important;
width: 336px !important;
z-index: 3;
border-bottom-left-radius: 43%;
float: right;
margin-right: 2px;
}
.orange:after {
content: '';
position: absolute;
left: 100%;
width: 0;
height: 0;
border-top: solid 113px transparent;
border-bottom: solid 113px transparent;
border-left: solid 109px #4C4245;
}
.green {
color: white;
position: relative;
background-color: #eaeaea;
height: 226px !important;
width: 380px !important;
z-index: 2;
margin-right: 50px;
margin-top: 2px;
float: right;
}
.green:after {
content: '';
position: absolute;
left: 100%;
width: 0;
height: 0;
border-top: solid 113px transparent;
border-bottom: solid 113px transparent;
border-left: solid 112px #eaeaea;
}
.green:before {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: solid 113px transparent;
border-bottom: solid 113px transparent;
border-left: solid 112px white;
}
.blue {
color: white;
position: relative;
background-color: #ededed;
height: 226px !important;
width: 383px !important;
border-top-right-radius: 50%;
float: right;
margin-right: 100px;
}
.blue:after {
content: '';
position: absolute;
top: 100%;
left: 100%;
margin-left: 250px;
width: 0;
height: 0;
}
.blue:before {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: solid 115px transparent;
border-bottom: solid 115px transparent;
border-left: solid 111px white;
}
@media screen and (max-width:1280px){
.orange::after {
border-left: 59px solid #4c4245;
}
.green {
width: 320px !important;
}
.green::after {
border-left: 59px solid #eaeaea;
}
.green::before {
border-left: 61px solid white;
}
.blue {
width: 320px !important;
}
.blue::before {
border-left: 61px solid white;
}
}
@media screen and (max-width:1170px){
.orange{
margin-right: 10px;
}
.orange::after {
border-left: 40px solid #4c4245;
}
.green {
margin-right: 10px;
}
.green::after {
border-left: 40px solid #eaeaea;
}
.green::before {
border-left: 40px solid white;
}
.blue {
margin-right: 0;
}
.blue::before {
border-left: 40px solid white;
}
.ordering span {
font-size:14px;
}
.ordering .spanfifth {
left: 21%;
margin: auto;
right: 0;
text-align: center;
width: 139px!important;
}
}
@media screen and (max-width:999px){
.orange{
width: 226px !important;
margin-right: 10px;
}
.orange::after {
border-left: 40px solid #4c4245;
}
.green {
margin-right: 10px;
width: 250px !important;
}
.green::after {
border-left: 40px solid #eaeaea;
}
.green::before {
border-left: 40px solid white;
}
.blue {
width: 260px !important;
margin-right: 0;
}
.blue::before {
border-left: 40px solid white;
}
.ordering span {
font-size:14px;
}
.ordering .spanfifth {
left: 21%;
margin: auto;
right: 0;
text-align: center;
width: 139px!important;
}
}
@media screen and (max-width:767px){
.green {
margin-right: 10px;
width: 240px !important;
}
.blue {
width: 250px !important;
margin-right: 0;
}
}
@media screen and (max-width:480px){
.orange{
width: 120px !important;
margin-right: 10px;
}
.orange::after {
border-left: 20px solid #4c4245;
}
.green {
margin-right: 10px;
width: 150px !important;
}
.green::after {
border-left: 20px solid #eaeaea;
}
.green::before {
border-left: 20px solid white;
}
.blue {
width: 160px !important;
margin-right: 0;
}
.blue::before {
border-left: 20px solid white;
}
.ordering span {
font-size:12px;
}
.ordering .spanone {
font-size: 21px;
left: 34%;
top: 8%;
}
.ordering .spananother {
left: 14%;
text-align: center;
top: 29%;
width: 108px !important;
}
.ordering .spanthird {
left: 18%;
position: absolute;
top: 40%;
width: 100px;
}
.ordering .spanfourth {
left: 16%;
top: 51%;
width: 98px;
}
.ordering .spanfifth {
left: 5%;
text-align: center;
top: 140px;
width: 119px !important;
}
.ordering .green .spanthird {
left: 21%;
top: 45%;
}
.ordering .green .spanfourth {
left: 23%!important;
top: 53%;
}
.ordering .green .spanfifth {
left: 14% !important;
top: 140px;
}
.ordering .blue .spanthird {
left: 21% !important;
top: 45%;
}
.ordering .blue .spanfourth {
left: 21%!important;
top: 54%;
}
.ordering .blue .spanfifth {
left: 21%!important;
top: 140pz;
}
}
@media screen and (max-width:320px){
.orange {
margin-right: 0px;
width: 96% !important;
float:none;
}
.ordering .col-xs-4 {
width: 100%;
}
.order_wrap .ordering span {
font-size: 14px;
left: 0 !important;
margin: auto;
right: 0 !important;
text-align: center;
width: 100% !important;
}
.green {
margin-right: 0;
margin-top:10px;
width: 96% !important;
float:none;
}
.blue {
margin-right: 0;
margin-top:10px;
width: 100% !important;
float:none;
}
.ordering .green .spanthird {
left: 0;
top: 40%;
}
.ordering .green .spanfourth {
left: 0 !important;
top: 51%;
}
.ordering .green .spanfifth {
left: 0 !important;
top: 140px;
}
.ordering .blue .spanthird {
left: 0 !important;
top: 40%;
}
.ordering .blue .spanfourth {
left: 0 !important;
top: 51%;
}
.ordering .blue .spanfifth {
left: 0 !important;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid order_wrap">
<div class="row margin-bottom-30 margin-top-20 ordering" style="margin-top:38px;margin-bottom:38px;">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="orange">
<span class="spanone">Step 1</span>
<span class="spananother">Send us your file &</span>
<span class="spanthird">Project Details,</span>
<span class="spanfourth">You will recieve a</span>
<span class="spanfifth">customized estimated link back</span>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="green">
<span class="spanone" style="color:#4C4245">Step 2</span>
<span class="spananother" style="color:#4C4245;width:180px">Click "Make my Sign" on</span>
<span class="spanthird" style="color:#4C4245">the estimated link,</span>
<span class="spanfourth" style="color:#4C4245;left:39%">You will recieve a</span>
<span class="spanfifth" style="color:#4C4245;left:26%;width:251px;">customized completed notification</span>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="blue">
<span class="spanone" style="color:#4C4245">Step 3</span>
<span class="spananother" style="color:#4C4245;width:180px">Click "Ship my Sign" on</span>
<span class="spanthird" style="color:#4C4245;left:45%">the completion,</span>
<span class="spanfourth" style="color:#4C4245;left:45%">notification link</span>
<span class="spanfifth" style="color:#4C4245;left:26%;width:251px;">Your new sign is on its way-!!</span>
</div>
</div>
</div>
</div>+0
感谢您花时间为我做这些事情。但遗憾的是，这不是一个响应式代码。通过我自己设计的响应式设计。 – John
其唯一的响应。你想怎么样？ –
当我检查在桌面上的响应三个盒子远离对方。我希望他们加入到每个桌面 – John
你的意思是加入？在彼此相邻的同一条线上？或者一个在另一个之下 –