html - 使用 CSS Grid 时内容不会在移动设备中换行
问题描述
我认为最好用 gif 来描述这一点。这是正在发生的事情:
我希望内容会继续在小屏幕上显示,但它会停止这样做,我会得到一个水平滚动条。
这是代码的codepen。
这是代码本身,因为 StackOverflow 坚持我也必须将代码放在这里。
HTML
<div class="l-grid">
<header>
<h1 class="logo"><span class="logo__brand-color">M</span>y Site</h1>
</header>
<main>
<div class="quote">
<img
src="https://cdn.mos.cms.futurecdn.net/c7dppKDbG3JXuMfybV5tUX-320-80.jpg"
alt="albert einstein"
class="quote__image"
/>
<p class="quote__body">
A hundred times every day I remind myself that my inner and outer
life are based on the labors of other men, living and dead, and that
I must exert myself in order to give in the same measure as I have
received and am still receiving.
</p>
<h3 class="quote__author">Albert Einstein</h3>
</div>
<div class="search">
<input
type="text"
class="search__field"
placeholder="Search quotes"
/>
</div>
</main>
<footer>
<ul class="footer-nav">
<li class="footer-nav__item">
<a href="#" class="footer-nav__link">About</a>
</li>
<li class="footer-nav__item footer-nav__item--separator">·</li>
<li class="footer-nav__item">
<a href="#" class="footer-nav__link">Contribute</a>
</li>
<li class="footer-nav__item footer-nav__item--separator">·</li>
<li class="footer-nav__item">
<a href="#" class="footer-nav__link">Contact</a>
</li>
</ul>
</footer>
</div>
CSS
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
border: none;
box-sizing: border-box;
}
:root {
font-size: 100%;
}
html,
body {
height: 100%;
}
body {
background-color: #292c37;
}
.l-grid {
display: grid;
width: 1100px;
margin: 0 auto;
height: 100%;
grid-template-columns: auto;
grid-template-rows: auto 2fr 2fr;
align-items: flex-end;
grid-gap: 20px;
}
header {
padding: 20px 0;
}
.logo {
color: #fff;
font-family: "Satisfy", cursive;
font-weight: 100;
}
.logo__brand-color {
color: hsl(355, 78%, 39%, 80%);
}
main {
display: grid;
grid-template-columns: auto;
grid-template-rows: 1fr auto;
grid-gap: 20px;
}
.quote {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
font-size: 1rem;
grid-gap: 50px;
}
.quote__image {
border-radius: 50%;
width: 140px;
height: 140px;
object-fit: cover;
border: 2px solid hsl(0, 0%, 0%, 60%);
border-style: inset;
}
.quote__body {
font-family: "Lora", serif;
color: hsl(0, 0%, 100%, 85%);
line-height: 1.93em;
font-size: 1.2em;
}
.quote__author {
color: hsl(355, 78%, 39%, 80%);
grid-column: span 2;
text-align: right;
font-size: 1.5em;
}
.search {
background-color: #363a49;
padding: 20px;
border-radius: 3px;
}
.search__field {
background-color: #292c37;
border: none;
border-radius: 3px;
height: 43px;
width: 100%;
color: hsl(0, 0%, 100%, 60%);
font-family: "Lora", serif;
padding: 10px;
}
footer {
font-size: 1rem;
align-self: start;
}
.footer-nav {
display: grid;
grid-template-columns: repeat(5, 100px);
justify-content: center;
align-self: flex-start;
}
.footer-nav__item,
.footer-nav__link {
color: hsl(0, 0%, 100%, 50%);
text-align: center;
}
.footer-nav__link {
font-size: 1em;
font-family: "Roboto", sans-serif;
}
.footer-nav__item--separator {
font-size: 3em;
line-height: 0.5em;
}
@media (max-width: 1100px) {
body {
padding: 20px;
}
.l-grid {
width: auto;
}
.quote {
grid-template-columns: auto;
grid-template-rows: auto auto;
grid-gap: 10px;
}
.quote__image {
display: none;
}
.quote__body {
grid-column: auto;
}
.quote__author {
grid-column: auto;
}
header {
padding: 0;
}
}
我尝试通过开发人员工具检查是否有一些填充或尺寸问题,但没有发现任何问题。我不确定我还能尝试什么。
解决方案
降低 autofilll 属性中的数字,因为低于 100px 宽的列使得最小 500px 总共 5 列,所以响应性低于 500px 或这样,
.footer-nav {
display: grid;
grid-template-columns: repeat(5, 64px);
justify-content: center;
align-self: flex-start;
}
推荐阅读
- rubymine - 有没有办法通过 JetBrains IDE 运行 PowerShell 脚本?
- c - 为什么当我按 CTRL+C 时程序读取零字节?(C-Posix)
- api - 如何限制每个用户或组在 Azure API 管理 (APIM) 中使用操作
- apache-spark - Spark read single column from PostgreSQL table
- php - Yii 2:在 require_once 中使用类
- android - 从 Ionic 项目中预填充的 SQLite 数据库读取时出错
- java - 什么是对不相交集上的行进行聚类的正确 JavaRDD 转换
- python - 使用 pandas 将 csv 文件导入 Jupyter Notebook
- postgresql - Automated Table creation for Postgres in Cloud Foundry
- php - HTML php localhost database retrieval