我正在尝试使CSS中的边框底部响应，所以当我放大时，它不会变得超级厚[重复]

问题描述 投票：0回答：1

正如标题所述，我正在努力让我的 CSS 响应式。我有一个

border-bottom: solid 0.5rem white;
代码行，我想知道是否有替代的大小调整选项可以使边框底部响应，因此当我放大网页时它会缩小而不是增大。

我在边框尺寸字段中尝试了多个值。 还有其他想法吗？

header {
    position: fixed;
    z-index: 100;
    width: 100%;
    border-bottom: solid 0.5% white;
    background-color: white;
    height: 5.3rem;
    background-image: url(./Images/sunset.JPG);
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% 100%;
    top: 0;
    padding: 0;
    margin: 0;
    margin-left: -8px;
}

我尝试输入像素值、em、rem、vh 等，以便当我放大网页并转向移动视图时，底部边框变得越来越高，使其变得如此厚，页面看起来很糟糕。

css responsive-design
1个回答
0
投票

你的定位看起来不错 - 没有代码笔很难分辨......所以我做了一个。

我将 border-bottom 设置为“solid 1px #abc123” --> 我通常使用该颜色来突出。白色边框上的白色不可见。

我在手机上检查了它，在 1px 下，它看起来并没有大得令人讨厌。希望这有帮助：

https://codepen.io/Graham-Tucker/pen/QWYYBJm

header {
position: fixed;
z-index: 100;
width: 100%;
border-bottom: solid 1px #abc123;
background-color: white;
height: 5.3rem;
background-image: url(./Images/sunset.JPG);
background-repeat: no-repeat;
background-position: top;
background-size: 100% 100%;
top: 0;
padding: 0;
margin: 0;
margin-left: -8px;}
.imgxpls {margin: 10px auto 10px auto; max-width: 600px;}
.imgxpls img {width: 100%; height: auto}

<HTML><header><p>Something here</p><hr/><p>Something else below</p>
</header>
<div class="imgxpls"><img src="https://outrightsites.com/wp-content/themes/altimeter_2020/img/wiki-commons-space-01.jpg" /></div>
<div class="imgxpls"><img src="https://outrightsites.com/wp-content/themes/altimeter_2020/img/wiki-commons-space-02.jpg" /></div>
<div class="imgxpls"><img src="https://outrightsites.com/wp-content/themes/altimeter_2020/img/wiki-commons-space-03.jpg" /></div>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.