Question

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

我的代码是：

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

Answer 1

为了使您的HTML页面具有响应能力并避免文本重叠，请对不同的宽度使用CSS media rules。例如：

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

希望这会有所帮助。

Answer 2

对于SELECT table2.DateWithDash -- add additional columns here as needed FROM table1 INNER JOIN table2 ON table1.DateNoDash = REPLACE(table2.DateWithDash, '-', '')，您必须尽可能避免使用responsive design。

static values

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

2 个答案: