我有一个网页，并为此添加了媒体查询。它适合所有响应式，但不适用于平板电脑（宽度：768像素）。我正在分享下面的图片。
[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屏幕和（最大宽度：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;
}
}
我无法了解为什么它在平板电脑模式下无法正常工作。对于平板电脑，替代文字和图像是正确的
先感谢您！！
最佳答案
请检查此希望对您有帮助
<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;
}
}
关于html - 平板电脑 View 无法正确显示媒体查询，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49051182/