假设我们所有的填充和边框都是0 px，我需要将div压缩到尽可能少的内容，刚好能容纳里面的文本。随着屏幕变小，div也会变小，就像它应该做的那样。下面是一个例子：
Example one
在这个例子中，屏幕是最大的，一切都很好。随着屏幕变小，在下面的第二个例子中，文本，这是一个div，打破了可预见的和可取的。
Second Example
在第二个例子中，我已经在我想消失的边涂上了颜色，变成了页边空白。为了清楚起见，我想让文本在空间中保持固定，我只想把宽度修剪得更小，边框更紧，与文本齐平。
我在网格容器中工作; div是在一个网格容器中。我正在寻找最小和最容易实现的CSS/HTML，试图避免任何JavaScript。虽然我认为没有JavaScript也是可能的，如果我需要使用它，我会。
我试过改变网格列宽。这可能是解决方案，因为我可能做错了。正如前面所说，我想删除文本周围的白色，而不是边距，也不是填充。这是宽度。“Existe”需要一个地方去，它在另一个文本下面，在两边留下额外的空间。
如有任何回应，不胜感激，谢谢。
源代码：
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
* {
font-family: 'Roboto', sans-serif;
}
body, html {
background-color: #212529;
padding: 0px;
margin: 0px;
}
.button {
display: flex;
align-items:center;
justify-content:center;
height: 40px;
width: 80px;
margin-top: 5px;
margin-bottom: 5px;
padding: 0px;
border: 0px;
border-radius: 6%;
background-color: transparent;
color: #81a1c1;
font-size: 90%;
text-decoration: none;
}
.header {
display: grid;
grid-template-columns: 3fr 1fr 1fr;
grid-template-areas: "logo button-one button-two";
grid-gap: 1%;
margin-bottom: 1%;
border: 4x;
border-bottom-style: solid;
border-bottom-color: #81a1c1;
}
.logo {
position: relative;
grid-area: logo;
justify-self: center;
right: 20%;
font-size: x-large;
margin-top: 10px;
margin-bottom: 10px;
color: #81a1c1;
text-decoration: none;
}
.button-one {
grid-area: button-one;
justify-self: end;
font-weight: 600;
}
.button-two {
grid-area: button-two;
justify-self: center;
font-weight: 600;
}
.main-content-container {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "text pic";
width: 100%;
height: 90vh;
}
.text {
display: inline;
grid-area: text;
align-self: center;
justify-self: center;
text-align: center;
text-justify: center;
font-size: 5em;
color: #d8dee9;
border: 4px;
border-style: solid;
border-color: #81a1c1;
border-radius: 2%;
}
.picture {
grid-area: pic;
align-self: center;
justify-self: center;
border: 4px;
border-style: solid;
border-color: #81a1c1;
border-radius: 2%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nord</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="header">
<a class="logo" href="">Home</a>
<button class="button button-one" >Contact!</button>
<button class="button button-two">Email Me!</button>
</div>
</header>
<main class="main-content-container">
<!--<img class="content picture" src="nord.png" alt="nord-theme photo minimal white nord">-->
<div class="content text">Lorem Ipsum<span style="color: #81a1c1;"> Existe</span></div>
</main>
</body>
</html>
2条答案
按热度按时间camsedfj1#
您可以创建如下所示的介质查询：
来覆盖你的一般规则。
750px是一个任意值，你可以用你的来代替。另外，你可以创建几个这样的媒体查询，你可以改变font-size和max-width，以满足您的需要。一个例子是在这个小提琴（我在笔记本电脑屏幕上测试，也许你没有看到类似的，所以我附上一个截图）x一个一个一个一个x一个一个二个x
j5fpnvbx2#
尝试在css中使用
max-width属性或使用max-width添加媒体查询。