时间戳

首页 > 解决方案 > 响应式 CSS 对监视器视图有影响，但我不想要它

html - 响应式 CSS 对监视器视图有影响，但我不想要它

问题描述

我试图让问题更清楚。我的问题是我的响应式 CSS 代码也可以在普通网站上运行，而不仅仅是在移动设备和其他设备上。所有行都关闭了，@media only 屏幕行也关闭了，整个响应式 css 部分用 } 关闭。出于某种原因，resp。代码覆盖正常代码。如果我使用所有@media，则什么也没有发生，移动设备将网站显示为 24" 显示器。如果我使用最大 1000 像素和 800 像素，则大部分网站都在工作。如果我只使用最大 800 像素，则相反网站正在工作，所以元素在最大 1000px 和 800px 梳之间的工作方式完全相反，只有 800px 设置。绝对疯狂......某些尺寸在移动设备上不起作用，但可以更改颜色。

<div class="foentry">

<div class="fo1bal">

<img src="<?php echo home_url( '/' ); ?>/wp-content/themes/kis-keep-it-simple/images/d42.png" border="0" alt="">

</div>



<div class="fo1koz">

<h2>Rólunk</h2>

<center>Üdvözlünk mindenkit!</center><br>
Üzletünkben különleges Muffinok találhatóak, kicsiknek és nagyoknak egyaránt. Térjenek be hozzánk és kóstolják meg termékeinket, melyeket Glutén, Laktóz és Cukormentes változatban is kérhetik.


</div>


<div class="fo1jobb">

<img src="<?php echo home_url( '/' ); ?>/wp-content/themes/kis-keep-it-simple/images/767.png" border="0" alt="">

</div>


</div>




<div class="foentry2">

<h2>Muffinjaink</h2>



<div class="fo21">

<img src="<?php echo home_url( '/' ); ?>/wp-content/themes/kis-keep-it-simple/images/kakaos-tejcsokis.png" border="0" alt="">
<center><h4>Kakaós tejcsokis</h4></center>

</div>



<div class="fo21">

<img src="<?php echo home_url( '/' ); ?>/wp-content/themes/kis-keep-it-simple/images/turorudi.png" border="0" alt="">
<center><h4>Túrórudis</h4></center>

</div>

<div class="fo21">
<img src="<?php echo home_url( '/' ); ?>/wp-content/themes/kis-keep-it-simple/images/franciareggeli.png" border="0" alt="">
<center><h4>Francia reggeli</h4></center>
</div>


<div class="catgomb">
<a href="<?php echo home_url( '/' ); ?>category/muffinok/">Összes Muffin</a>
</div>


</div>





<div class="foentry2a">
<h2>Kávék</h2>

<div class="fo21">
<img src="<?php echo home_url( '/' ); ?>/wp-content/themes/kis-keep-it-simple/images/cappuchino.png" border="0" alt="">
<center><h4>Cappucino</h4></center>
</div>

<div class="fo21">
<img src="<?php echo home_url( '/' ); ?>/wp-content/themes/kis-keep-it-simple/images/coffee.png" border="0" alt="">
<center><h4>Kávé</h4></center>
</div>

<div class="fo21">
<img src="<?php echo home_url( '/' ); ?>/wp-content/themes/kis-keep-it-simple/images/latte.png" border="0" alt="">
<center><h4>Latte</h4></center>
</div>


</div>




<div class="foentry2b">
<h2>Alkoholmentes koktélok</h2>

<div class="fo21">
<img src="<?php echo home_url( '/' ); ?>/wp-content/themes/kis-keep-it-simple/images/batman.png" border="0" alt="">
<center><h4>Batman</h4></center>
</div>

<div class="fo21">
<img src="<?php echo home_url( '/' ); ?>/wp-content/themes/kis-keep-it-simple/images/mickey.png" border="0" alt="">
<center><h4>Minnie Mouse</h4></center>
</div>

<div class="fo21">
<img src="<?php echo home_url( '/' ); ?>/wp-content/themes/kis-keep-it-simple/images/tarzan.png" border="0" alt="">
<center><h4>Tarzan</h4></center>
</div>


<div class="catgomb">
<a href="<?php echo home_url( '/' ); ?>category/koktelok/">Összes Koktél</a>
</div>



</div>







<div class="foentry3">

<h2>Akciók és kedvezmények</h2>


<div class="fo31">
<h3>Akció 1.</h3>

<ul>
    <li>2db puncsos muffin</li>
    <li class="utso">1db 0,25l Cappy</li>
</ul>

<h4>900 Ft</h4>
</div>



<div class="fo31">
<h3>Akció 2.</h3>

<ul>
    <li>1db kávés+1db mákos almás muffin</li>
    <li class="utso">1db 0,25l szénsavas üdítő</li>
</ul>

<h4>900 Ft</h4>
</div>



<div class="fo31">
<h3>Akció 3.</h3>

<ul>
    <li>2db diós muffin</li>
    <li class="utso">3dl limonádé</li>
</ul>

<h4>850 Ft</h4>
</div>

<div class="cl">&nbsp;</div>

<div class="fo31">
<h3>Akció 4.</h3>

<ul>
    <li>2db válaszható muffin</li>
    <li class="utso">Cappucino</li>
</ul>

<h4>750 Ft</h4>
</div>



<div class="fo31">
<h3>Felnőtt akció 1.</h3>

<ul>
    <li>1db válaszható muffin</li>
    <li class="utso">Hosszú kávé</li>
</ul>

<h4>700 Ft</h4>
</div>



<div class="fo31">
<h3>Felnőtt akció 2.</h3>

<ul>
    <li>1db kávés muffin</li>
    <li class="utso">Latte</li>
</ul>

<h4>750 Ft</h4>
</div>


</div>

响应。CSS：


    @media only screen and (max-width: 800px) {



html{
width:100%;
height:100%;
}

#navigation{
margin:0;
padding:2% 0 0 0;
float:left;
display:block;
height:5%;
}

#navigation a{
font-size:3.5vw;
}

#header0 .blog-info { 
position:absolute;
width:26%;
margin-left:38%;
margin-top:6%;
float:left; 
}

.blog-info img{
width:100%;
}

.m1{
position:absolute;
float:left;
margin:0 0 0 5%;
padding:0 0 0 0;
}

.m2{
position:absolute;
float:left;
margin:0 0 0 27%;
padding:0 0 0 0;
}

.m3{
float:right;
position:absolute;
margin:0 0 0 54%;
padding:0 0 0 0;
}

.m4{
float:right;
position:absolute;
margin:0 0 0 73%;
padding:0 0 0 0;
}

.fo1bal{
width:100%;
float:left;
}

.fo1koz{
width:90%;
padding:0 5%;
float:left;
font-size:3.3vw;
line-height:1.6em;
}


.fo1koz h2{
margin:10% 0 12% 0;
font-size:4.8vw;
}

.fo1jobb{
width:100%;
float:left;
}

.foentry2
width:100%;
float:left;
}

.foentry2 h2{
margin:10% 0 12% 0;
font-size:4.5vh;
}

.fo21{
width:90%;
padding:0 5%;
margin-bottom:12vh;
}

.fo21 h4{
font-size:3vh;
margin:3vh 0 0 0;
}


.foentry2a h2{
margin:10% 0 12% 0;
font-size:4.5vh;
}

.foentry2b h2{
margin:10% 0 12% 0;
font-size:4.5vh;
line-height:1.5em;
}






}

@Admin，请告诉我是否必须在结束问题之前分享更多详细信息。我真的需要解决这个问题。预先感谢您对我们的支持。

标签： htmlcssresponsiveinverse

解决方案

推荐阅读