我有一个网页，并为此添加了媒体查询。它适用于所有响应但不适用于平板电脑（宽度：768px）。我正在分享下面的图片。
[Image][1]
我的HTML
<div class="container-fluid service">
<div class="col-md-12 col-lg-12 col-xs-12 margin" style="padding-top: 20px;margin-left: 45px;">
<div class="row s1">
<div class="col-md-8 col-xs-12 col-sm-12">
<h4 class="text-right design" style="padding-top: 20px; font-size: 24px; font-family: Titillium Web Semibold;color: #002A7B;line-height: 1">Emerging Markets<br>Strategy</h4>
<p class="cnt1 text-right">Market penetration or New Product Introduction services to accelerate success in emerging markets</p>
<input type="button" class="button" href="Product-Realization-Services.php" target="_blank" value="View More" style="float: right">
</div>
<div class="col-md-4 col-lg-4 col-xs-4 col-sm-4">
<img src="images/emerging market strategy.jpg" alt="Product Realization" style="height: 200px;padding-top: 12px;padding-bottom: 10%">
</div>
</div>
</div>
</div>
text.css
@media only screen and（max-width：425px）{
.iconlist li {
font-family: 'open sans';
font-style: normal;
font-size: 12px!important;
line-height: 1.2!important
}
.core {
padding-top: 10px;
}
.image {
width: 100%;
height: 150px!important;
}
.top h1{
font-size: 24px!important;
top: 15%!important;
width: 100%;
}
.top span h1{
font-size: 18px!important;
}
.s1 img {
height: 150px!important;
padding-top: 50%!important;
display: none;
}
.s1 {
height: 170px!important;
}
.design{
padding-top: 20px;
font-size: 18px!important;
font-family: Titillium Web Semibold;
color: #002A7B;
line-height: 1;
text-align: justify-all!important;
}
.cnt {
font-size: 13px!important;
text-align: justify-all;
color: #686868;
line-height: 1.2!important;
}
.button {
height: 30px!important;
width: auto;
float: left!important;
font-size: 10px!important;
}
.design {
font-size: 15px!important;
float: left!important;
text-align: left!important;
}
.cnt1 {
font-size: 12px!important;
text-align: justify-all!important;
float: left!important;
text-align: left!important;
}
.para {
font-size: 16px!important;
color: #002A7B;
font-family: 'Titillium Web Semibold';
}
.services {
padding-top: 0!important;
margin-left: 0!important;
}
.margin {
margin-left: 0!important;
}
.one {
font-family: 'open sans';
font-style: normal;
font-size: 13px!important;
color: black;
font-weight: none;
text-align: justify;
}
.two {
font-family: 'Titillium Web Semibold';
font-size: 13px!important;
color: #061835;
}
.s1 img {
float: right!important;
position: inherit!important;
}
}
我无法理解平板电脑模式无法正常工作的原因。对于平板电脑，替代文字和图像是正确的 提前谢谢!!
答案 0 :(得分：0)
请检查这希望它会对你有所帮助
<div class="container-fluid">
<div class="col-md-12 col-lg-12 col-xs-12 margin" style="padding-top: 20px;margin-left: 45px;">
<div class="row s1">
<div class="col-md-8 col-xs-12 col-sm-12">
<h4 class="text-right design" style="padding-top: 20px; font-size: 24px; font-family: Titillium Web Semibold;color: #002A7B;line-height: 1">Emerging Markets<br>Strategy</h4>
<p class="cnt1 text-right">Market penetration or New Product Introduction services to accelerate success in emerging markets</p>
<input type="button" class="button" href="Product-Realization-Services.php" target="_blank" value="View More" style="float: right">
</div>
<div class="col-md-4 col-lg-4 col-xs-12 col-sm-4">
<img src="https://v4-alpha.getbootstrap.com/assets/img/bs-themes.png" alt="Product Realization">
</div>
</div>
</div>
</div>
@media only screen and (min-device-width: 320px) and (max-device-width: 1024px) {
.margin {
padding: 0;
margin: 0;
}
.iconlist li {
font-family: 'open sans';
font-style: normal;
font-size: 12px!important;
line-height: 1.2!important
}
.core {
padding-top: 10px;
}
.image {
width: 100%;
height: 150px!important;
}
.top h1 {
font-size: 24px!important;
top: 15%!important;
width: 100%;
}
.top span h1 {
font-size: 18px!important;
}
.s1 img {
height: 100%;
width: 100%;
}
.s1 {
height: 170px!important;
}
.design {
padding-top: 20px;
font-size: 18px!important;
font-family: Titillium Web Semibold;
color: #002A7B;
line-height: 1;
text-align: justify-all!important;
}
.cnt {
font-size: 13px!important;
text-align: justify-all;
color: #686868;
line-height: 1.2!important;
}
.button {
height: 30px!important;
width: auto;
float: left!important;
font-size: 10px!important;
}
.design {
font-size: 15px!important;
float: left!important;
text-align: left!important;
width: 100%;
}
.cnt1 {
font-size: 12px!important;
text-align: justify-all!important;
float: left!important;
text-align: left!important;
width: 100%;
}
.para {
font-size: 16px!important;
color: #002A7B;
font-family: 'Titillium Web Semibold';
}
.services {
padding-top: 0!important;
margin-left: 0!important;
}
.margin {
margin-left: 0!important;
}
.one {
font-family: 'open sans';
font-style: normal;
font-size: 13px!important;
color: black;
font-weight: none;
text-align: justify;
}
.two {
font-family: 'Titillium Web Semibold';
font-size: 13px!important;
color: #061835;
}
.s1 img {
float: right!important;
position: inherit!important;
}
}
答案 1 :(得分：0)
您是否考虑使用Bootstrap使用的相同媒体中断。
无论如何，阅读并了解如何完成它是有帮助的。
基本上，如果你的视图比你设置的最小，那么休息时间要小于＆＃39;一些宽度。在那之后，每次休息应该大于或等于＆＃39;到某个指定的宽度，否则你会得到折断重叠。