如何使其响应桌面和移动？

时间：2017-11-04 06:30:05

标签： html css twitter-bootstrap responsive-design

我使用CSS和Bootstrap制作了这个设计。我也在使用Bootstrap。发生的问题是这没有响应。任何人都可以帮助我做出响应吗？

HTML：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我知道如何使用MEDIA Query来完成它，但我希望使用最少的媒体查询来保持响应。

我使用CSS制作的图像

enter image description here

3 个答案:

答案 0 :(得分：0)

将bootstrap类 col-xs 与所有 col-lg 一起使用，如下所示：

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
   rest of tag goes here...
</div>

答案 1 :(得分：0)

试试这个。我尽力了。请检查。

.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>

答案 2 :(得分：-1)

Bootstrap提供响应式设计的类。 您使用了＆＃34; col-lg-4 ＆＃34;这仅适用于大屏幕，为了响应您需要添加类似＆＃34; col-md-4，col-sm-4或col-xs-4 ＆＃34;取决于你的要求。

因此，只需在col-lg-4旁边添加不同的列，您的代码就可以完全正常地响应。

供参考：Bootstrap Grid System

** 

<div class="col-lg-4 col-sm-4">
  "Your code"
</div>

**

相关问题
最新问题