试图让我的网站响应并希望为手机指定@media 查询。
我在每个站点的全身都设置了一个包装器,以使内容居中。
我在@media 中设置了一个新包装器,但想将表格向左移动一点。不过,似乎没有什么可以移动桌子。尝试设置边距左/右和不同的定位。我还能尝试什么?
我的@media 查询的完整 CSS:
body {
background-color: #d5e6b3;
font-family: 'Raleway';
font-weight: 700;
color: #000;
background-image: url(../img/backgroundt.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.wrapper {
margin: 0 auto;
width: 1200px;
}
thead tr {
background-color: #a0d93f;
}
td {
padding: 12px 15px;
}
tbody tr:first-child {
background-color: #707fe0;
}
tbody tr:nth-last-of-type(even) {
background-color: #949feb;
}
tbody tr:last-child {
background-color: #707fe0;
}
@media(max-width: 500px) {
html,
body {
overflow-x: hidden;
}
body {
position: relative
}
.wrapper {
width: 200px;
}
.table {
margin-right: 50px;
}
}
<div class="wrapper">
<h1>About me</h1>
<table>
<thead>
<tr>
<th>Skills</th>
<th>Years of Experience</th>
<th>Levels of Experience</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>1</td>
<td>Beginner</td>
</tr>
<tr>
<td>CSS</td>
<td>1</td>
<td>Beginner</td>
</tr>
<tr>
<td>JavaScript</td>
<td>1</td>
<td>Beginner</td>
</tbody>
</table><br>
<br>
找到了这个问题的答案。
表格没有正确对齐左边距或右边距的各种 px,margin-left: auto 和 margin-right: auto 或左侧或右侧的填充也没有正确对齐。但是,使用 flex 和 flex-wrap 将表头与表体对齐可以为移动设备工作并使表居中。
在最大宽度为 500 像素的设备上使用 Web 开发工具打开它时可以看到更改。
body {
background-color: #d5e6b3;
font-family: 'Raleway';
font-weight: 700;
color: #000;
background-image: url(../img/backgroundt.png);
background-size: cover;
background-repeat:no-repeat;
background-attachment: fixed;
}
.wrapper {
margin: 0 auto;
width: 1200px;
}
thead tr {
background-color: #a0d93f;
}
td {
padding: 12px 15px;
}
tbody tr:first-child {
background-color: #707fe0;
}
tbody tr:nth-last-of-type(even) {
background-color: #949feb;
}
tbody tr:last-child {
background-color: #707fe0;
}
@media(max-width: 500px) {
html, body {
overflow-x: hidden;
}
body {
position: relative
}
.wrapper {
width: 200px;
}
.table {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/styles.css" type="text/css">
</head>
<body>
<div class="wrapper">
<h1>About me</h1>
<table>
<thead>
<tr>
<th>Skills</th>
<th>Years of Experience</th>
<th>Levels of Experience</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>1</td>
<td>Beginner</td>
</tr>
<tr>
<td>CSS</td>
<td>1</td>
<td>Beginner</td>
</tr>
<tr>
<td>JavaScript</td>
<td>1</td>
<td>Beginner</td>
</tbody>
</table><br>
<br>
</body>
</html>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句