时间戳

首页 > 解决方案 > 调整浏览器大小时的响应问题

html - 调整浏览器大小时的响应问题

问题描述

在调整网站大小时，我的网站的响应能力总是存在问题，当我增加大小时，字母会增长并相互融合。不知何故，我无法自己解决这个问题。

我的代码是：

html {
position: relative;
min-height: 100%;
}

html, body {
margin: 0;
padding: 0;
background: #ffffff;
width: auto;
}

li {
list-style-type: none;
list-style-position: inside;
align-self: center;
}

a {
text-decoration: none;
color: #101b45;
font-family: Garamond; 
font-weight: bold;
font-size: 250%;
}

a:hover {
color: #5166b7;
}

body {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 0px;
justify-items: center;
}

img {
height: 100%;
}
<body>
  <li class="aboutme"><a href="#">Over Mij</a></li>
  <li class="resume"><a href="#">Resumé</a></li>
  <li><img class="home_cartoon" src="cartoon.png"></li>
  <li class="portfolio"><a href="#">Portfolio</a></li>
 <li class="contact"><a href="#">Contact</a></li>
</body>

有人可以帮我吗？z

标签： htmlcss

解决方案

为了使您的 HTML 页面具有响应性并避免文本重叠，请使用不同宽度的CSS 媒体规则。例如：

@media screen and (max-width: 480px) { 
     a {
         font-size: 150%; // change the value as required for widths less than 480px
     }
}

希望这可以帮助。

推荐阅读