在使网页响应方面遇到问题 [英] Getting problems in making the webpage responsive
本文介绍了在使网页响应方面遇到问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我面临一些问题，使网页响应，如价格计划部分从735像素不是一致的大小。还有其他一些问题..
我尝试过：
i尽我所能使页面响应，但有些地方仍然没有响应..
代码在这里。 />
i am facing some problems in making the web page responsive like price-plans section is not uniformely sized from 735 px. And there are some other problems too..
What I have tried:
i tried my best to make the page responsive but some places are still non-responsive..
code here.
<section class="section-plans">
<div class="row">
<h2>Start eating Healty today</h2>
</div>
<div class="row">
<div class="col span-1-of-3 first-box">
<div class="plan-box">
<div>
<h3>Premium</h3>
<p class="month">399$/<span> per month</span></p>
<p class="meal">That’s only 13.30$ per meal</p>
</div>
<div>
<ul>
<li><i class="fas fa-check icon-small"></i>1 meal every day</li>
<li><i class="fas fa-check icon-small "></i> 24/7</li>
<li><i class="fas fa-check icon-small"></i>Access to newest creations</li>
<li><i class="fas fa-check icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
<a href="#" class="btn btn-full">Sign-Up</a>
</div>
</div>
</div>
<div class="col span-1-of-3 ">
<div class="plan-box">
<div>
<h3>Pro</h3>
<p class="month">149$/<span>per month</span></p>
<p class="meal">That’s only 14.90$ per meal</p>
</div>
<div>
<ul>
<li><i class="fas fa-check icon-small"></i>1 meal 10 days/month</li>
<li><i class="fas fa-check icon-small"></i>Order 24/7</li>
<li><i class="fas fa-check icon-small"></i>Access to newest creations</li>
<li><i class="fas fa-check icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
<a href="#" class="btn btn-ghost">Sign-Up</a>
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box">
<div>
<h3>Starter</h3>
<p class="month">19$/<span>per meal</span></p>
<p class="meal"> </p>
</div>
<div>
<ul>
<li><i class="fas fa-check icon-small"></i>1 meal</li>
<li><i class="fas fa-check icon-small"></i>Order from 8 am to 12 pm</li>
<li><i class="fas fa-times icon-small"></i></li>
<li><i class="fas fa-check icon-small "></i>Free delivery</li>
</ul>
</div>
<div>
<a href="#" class="btn btn-ghost">Sign-Up</a>
</div>
</div>
</div>
</div>
</section>
css style
css style
.section-plans{
background-color: #f4f4f4;
}
.section-plans h2{
margin-top: 80px;
}
.plan-box{
background-color: #fff;
border-radius: 5px;
margin-left: 10%;
width:90%;
}
.plan-box div{
padding: 15px;
border-bottom:1px solid #e8e8e8;
box-shadow:0px 1px 2px #f5f2f2;
}
.month{
font-size: 300%;
margin-bottom: 20px;
font-weight: 210%;
color:#e67e22;
}
span{
font-size: 30%;
font-size: 300;
}
.plan-box ul{
list-style: none;
}
.plan-box div:last-child{
border:none;
text-align: center;
}
.plan-box:first-child{
background-color: #fcfcfc;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
整个媒体
media quiries whole
/* Big tablet to 1200px (widths smaller taht the 1140px row) */
@media only screen and (max-width: 1200px) {
.hero-text {
width: 100%;
padding: 0 2%;
}
.row { padding: 0 2%; }
}
/* Small tablet to big tablet: from 768px to 1023px */
@media only screen and (max-width: 1023px) {
body { font-size: 18px; }
section { padding:60px 0px; }
.long-copy {
width: 80%;
margin-left: 10%;
}
.steps-box { margin-top: 10px; }
.steps-box:last-child { margin-top: 10px; }
.works-steps { margin-bottom: 40px; }
.works-step:last-of-type { margin-bottom: 60px; }
.app-screen { width: 40%; }
.steps-box:first-child { text-align: center; }
.icon-small{
width: 17px;
margin-right: 5px;
}
.city-feature{
margin-bottom: 10px;
font-size:100%;
}
.plan-box{
width: 100%;
margin-left: 0%;
}
.plan-price{
font-size: 250%;
}
.contact-form{
width: 80%;
}
}
/* Small phones to small tablets: from 481px to 767px */
@media only screen and (max-width: 767px) {
section {padding: 30px 0;}
body { font-size: 13px; }
.plan-box div{
}
.plan-box{
width:95%;
}
.first{
font-size: 87%;
}
.row,
.hero-text-box {
padding: 0 4%; }
.col {
width: 100%;
}
.main-nav {
display:none;
}
h1 { font-size: 180%; }
h2 { font-size: 112%; }
.long-copy { width: 100%;
margin-left: 0%;
}
/* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) {
.col {
width: 100%;
margin-bottom: 0 0 4% 0;
margin-right: 10%;
}
.contact-form{
width: 100%;
}
}
.contact-form label{
clear: both;
float:left;
content: "";
clear: both;
visibility:none;
display: inline-block;
height: 0px;
margin-top: 20px;
}
.contact-form div{
padding: 0;
}
.plan-box{
margin-top: 10px;
}
.contact-form label{
margin-left:10px;
}推荐答案
/<span> per month</span></p>
\t\t\t\t<p class=\"meal\">That’s only 13.3 0
/<span> per month</span></p> <p class="meal">That’s only 13.30
per meal</p>
\t\t\t</div>
\t\t\t<div>
\t\t\t\t<ul>
\t\t\t\t\t<li><i class=\"fas fa-check icon-small\"></i>1 meal every day</li>
\t\t\t\t\t<li><i class=\"fas fa-check icon-small \"></i> 24/7</li>
\t\t\t\t\t<li><i class=\"fas fa-check icon-small\"></i>Access to newest creations</li>
\t\t\t\t\t<li><i class=\"fas fa-check icon-small\"> </i>Free delivery</li>
\t\t\t\t</ul>
\t\t\t</div>
\t\t\t<div>
\t\t\t\t<a href=\"#\" class=\"btn btn-full \">Sign-Up</a>
\t\t\t</div>
\t\t</div>
</div>
\t\t<div class=\"col span-1-of-3 \">
\t\t\t<div class=\"plan-box\">
\t\t\t\t<div>
\t\t\t\t<h3>Pro</h3>
\t\t\t\t<p class=\"month\">149
per meal</p> </div> <div> <ul> <li><i class="fas fa-check icon-small"></i>1 meal every day</li> <li><i class="fas fa-check icon-small "></i> 24/7</li> <li><i class="fas fa-check icon-small"></i>Access to newest creations</li> <li><i class="fas fa-check icon-small"></i>Free delivery</li> </ul> </div> <div> <a href="#" class="btn btn-full">Sign-Up</a> </div> </div> </div> <div class="col span-1-of-3 "> <div class="plan-box"> <div> <h3>Pro</h3> <p class="month">149
/<span>per month</span></p>
\t\t\t\t<p class=\"meal\">That’s only 14.90
/<span>per month</span></p> <p class="meal">That’s only 14.90
这篇关于在使网页响应方面遇到问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
