[英]How can I make my website not distort when I zoom in and out?
I am currently working on a website and I was wondering how I could get my navbar not distort when I zoom in. For example when I zoom out of the page the nav buttons move far away, when I zoom they form a cluster and overlap each other.我目前正在开发一个网站,我想知道如何让我的导航栏在放大时不会扭曲。例如,当我缩小页面时,导航按钮会移得很远,当我放大时,它们会形成一个簇并相互重叠其他。 What can I do to make it zoom without that happening?
我该怎么做才能让它缩放而不发生这种情况? Here is my code:
这是我的代码:
HTML: HTML:
<header>
<div class="main">
<div class="logo-text">
<h1 class="text-logo">Title</h1>
</div>
<nav>
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="store.html">Store</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
CSS: CSS:
* {
margin: auto;
padding: auto;
box-sizing: border-box;
font-family: Century Gothic;
}
header {
height: 15%;
background-size: cover;
background-position: center;
background-color: #ebebeb;
border-bottom: 5px solid #A9A9A9;
}
html,
body {
/* background: #000000;*/
font-size: .80em;
/* font-family: "Balsmiq", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;*/
margin: 0%;
padding: 0%;
color: #696969;
height: 100%;
width: 100%;
}
ul {
list-style-type: none;
text-align: center;
margin-top: -3.7%;
}
ul li {
display: inline-block;
margin-left: 0%;
font-size: 170%;
}
ul li a {
transition: 0.6s ease;
text-decoration: none;
color: #000000;
padding: 5px 40px;
border: 2px solid #000000;
font-weight: 700;
}
ul li a:hover,
.active {
background-color: #000000;
color: #ffffff;
}
.main {
min-width: 300px;
}
.main h1 {
padding: 1.5%;
margin-left: 3%;
font-family: Leckerli One;
color: black;
font-size: 3.1875rem;
}
Thanks in advance!提前致谢!
Try using bootstrap to make your website responsive to all screen size.尝试使用引导程序使您的网站响应所有屏幕尺寸。 Because when you zoom in the site takes that screen size.
因为当您放大网站时,会采用该屏幕尺寸。 So using @media to make it responsive to all screen.
所以使用@media 让它响应所有屏幕。 So when you zoom in or out it will remain the same.
因此,当您放大或缩小时,它将保持不变。
You can divide page in columns for making it responsive like shown below:您可以将页面分列以使其具有响应性,如下所示:
<div class="section group">
<div class="col span_1_of_3">
This is column 1
</div>
<div class="col span_1_of_3">
This is column 2
</div>
<div class="col span_1_of_3">
This is column 3
</div>
</div>
You can use BootStrap.您可以使用引导程序。 Check tutorials there are many.
检查教程有很多。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.