如何阻止CSS布局在放大/缩小时扭曲？ [英] How do I stop a CSS layout from distorting when zooming in/out?

问题描述

我设置了一个非常基本的网站，其中包含#container div，其中包含#navbar和#content。但是，当我放大或缩小时，#navbar扭曲，如果我放大链接被推到下面彼此，而不是内联。如果我缩小，在链接之间添加太多的填充。如何停止这个？

I've set up a very basic site with a #container div that includes the #navbar and #content. However, when I zoom in or out, the #navbar distorts, if I zoom in the links get pushed down below each other instead of being inline. If I zoom out, too much padding is added between the links. How can I stop this?

HTML：

HTML:

<div id="navbar">
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="top.html">Top</a></li>
    <li><strong><a href="free.html">FREE</a></strong></li>
    <li><a href="photo.html">Photo</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact Us</a></li>
</ul>
</div>

<div id="content">

<p>Some sample text.<p>

</div>


</div>

CSS：

#container {

    position: static;
    background-color: #00bbee;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 7%;
    margin-bottom: 15%;
    border: 2px solid red;


}

#navbar  ul{

    list-style: none;



}

#navbar  li{

    display: inline;

}

#navbar li a{

    text-decoration: none;
    color: #11ff11;
    margin: 3%;
    border: 1px dotted orange;
    padding-left: 4px;

}

#navbar li a:hover {

    background-color: white;
    color: green;

}

#navbar {

    background-color: #eeeeee;
    padding-top: 2px;
    padding-bottom: 5px;
    border: 1px solid yellow;

}

如何阻止它扭曲？

此外，我还是CSS的新手，我被教会使用％而不是px。是对的吗？还有什么你必须指出，请让我知道。

Also, I'm still pretty new to CSS, I was taught to use % instead of px. Is that right? Also anything else you've got to point out, please let me know.

提前感谢！

推荐答案

由于此问题仍然保持常量视图，我将发布我当前使用的解决方案。

As this question still gets constant views, I'll post the solution I use currently.

CSS媒体查询：

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

/*Write your css here*/

}

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

}

签出：
CSS-Tricks +设备尺寸和媒体查询

这篇关于如何阻止CSS布局在放大/缩小时扭曲？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！