【发布时间】：2020-12-04 20:31:15
【问题描述】：
我正在制作一个网站，但遇到了问题。当我在桌面上使用它时，所有分隔符都有清晰易读的文本。 . （往下看）：
但是，在移动设备上使用时，标题（示例标题）位于分隔符元素下方。这令人沮丧，因为它不仅会阻止文本使其不可读，而且还会使其看起来很糟糕。我想知道是否可以提供一些帮助。
在移动设备上（我在问题周围添加了环）：
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<link rel='shorcut icon' type='image/x-icon' href='circle.ico' />
</head>
<body>
<title>Home</title>
<div class="header">
<h3 class="logo" id='logo'>Logo</h3>
<input type="checkbox" id="chk">
<label for="chk" class="show-menu-btn">
<i class="fas fa-ellipsis-h"></i>
</label>
<ul class="menu" id='navbar'>
<a href="#section1">Home</a>
<a href="#section2">About</a>
<a href="#">Calendar</a>
<a href="#">News</a>
<a href="#">Contact</a>
<label for="chk" class="hide-menu-btn">
<i class="fas fa-times"></i>
</label>
</ul>
</div>
<style>
body {
margin:0px;
}
.colour-block {
background:#34495e;
width:60%;
padding:7% 20% 10% 20%;
color:#fff;
}
.white-block {
background:#fff;
width:60%;
padding:7% 20% 10% 20%;
color:#823A9C;
}
h1 {
text-align:center;
font-size:80px;
font-family:'wire one', serif;
font-weight:normal;
}
p {
font-size:20px;
font-family:'Raleway', serif;
}
/*------------------*/
/* SKEW CLOCKWISE */
/*------------------*/
.skew-cc{
width:100%;
height:100px;
position:absolute;
left:0px;
background: linear-gradient(to right bottom, #34495e 49%, #fff 50%), linear-gradient(-50deg, #ffffff 16px, #000 0);
}
/*-------------------------*/
/* SKEW COUNTER CLOCKWISE */
/*-------------------------*/
.skew-c{
width:100%;
height:100px;
position:absolute;
left:0px;
background: linear-gradient(to left bottom, #fff 49%, #34495e 50%);
}
</style>
<link href='https://fonts.googleapis.com/css?family=Wire+One|Raleway:300' rel='stylesheet' type='text/css'>
**THIS IS WHERE I HAVE DONE THE DIVIDERS**
<div class="skew-c"></div>
<div class="colour-block">
<h1>Example Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="skew-cc"></div>
<div class="white-block">
<h1>Example Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="skew-c"></div>
<div class="colour-block">
<h1>Example Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="content">
</div>
</body>
</html>
【问题讨论】：
-
使用媒体查询来提高移动视图的第一个 etxt 元素的上边距。
-
我对 html 和 css 有点陌生...我将如何做到这一点？