html - 我可以改进什么来进行响应式设计

Question

当

标签调整大小时脱离了它的父

，我怎么能让它响应并留在

HTML 代码中。这就是我想用 HTML 和 CSS 实现:我尝试将所有内容包装在一个 div 中，这样我就可以使用绝对元素来控制元素，这样我就可以将它居中。

提前感谢您的建议，以帮助我在未来制作精美的网站。

@import url('https://fonts.googleapis.com/css?family=Didact+Gothic');
    

    html,body {
            height: 100%;
        }
        body {
            margin: 0;
            background-color: #eee;        
        }
        header {
            height: 100vh;
            background-size: cover;
            position: relative;
            height: 100%;
            background-image: url("/images/background.jpeg")
        }
        .text {
            position: relative;
            width: 100%;
            height: 100%;
        }
        .text1 {
            font-size: 35vh;
            position:absolute;
            top: 5%;
            left: 5%;
            color: #fff;
            font-weight: bold;
            margin: 0;
            height: auto;
        }
        .text2 {
            margin: 0;
            font-size: 35vh;
            position:absolute;
            left:33%;
            top: 40%;
            font-size: 5vh;
            text-transform: uppercase;
        }
        .text3 {
            position:absolute;
           left: 15%;
            top: 50%;
            width: 50vh;
            height: auto;
            margin: 0;
            font-weight: 4vh;
            font-weight: bold;
            font-style: italic;
            font-family: 'Didact Gothic', sans-serif;
            color: #fff;
        }
        .text4 {
            position:absolute;
            left: 15%;
             top: 65%;
             margin: 0;
             width: 50vh;
             font-weight: bold;
             font-style: italic;
             color: #fff;
             font-family: 'Didact Gothic', sans-serif;
        }

<header id="showcase">
<div class="text">
<h1 class="text1">-20%</h1>
<h1 class="text2">Rabbat</h1>
<p class="text3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel facilisis volutpat est velit egestas dui.
 </p>
 <p class="text4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel facilisis volutpat est velit egestas dui.
</p>
</div>
</header>

最佳答案

在你的 head 标签中使用它，并且尽量不要对内部控件使用绝对位置

<style>
p{
   work-break: break-all;
}
</style>

关于html - 我可以改进什么来进行响应式设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55716701/

上一篇：javascript - 无法在移动 View 中隐藏 div

下一篇：html - 移动浏览器上的 CSS

Answer 1

在你的 head 标签中使用它，并且尽量不要对内部控件使用绝对位置

<style>
p{
   work-break: break-all;
}
</style>