html - 如何使我的徽标和 h1 元素移动响应
问题描述
这是代码的完整css。当网站发布时,在平板电脑和计算机上看起来不错,但在移动设备上却不行。徽标和 h1 没有响应。这是代码的完整css。当网站发布时,在平板电脑和计算机上看起来不错,但在移动设备上却不行。徽标和 h1 没有响应。
body {
margin: 0;
padding: 0;
}
/* header */
.logo-img {
width: 420px;
}
h1 {
text-align: right;
font-family: 'Abel', sans-serif;
font-size: 35px;
margin-top: 20px;
color: #1a1a1a;
text-transform: uppercase;
}
h2 {
text-align: right;
font-family: 'Abel', sans-serif;
font-size: 21px;
color: #1a1a1a;
font-weight: 100;
text-transform: uppercase;
letter-spacing: 6px;
}
.line {
width: 97.5%;
}
/* end header */
/* content */
.main-img {
width: 100%;
}
p {
text-align: center;
margin-top: 10px;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
font-weight: 100;
color: #1a1a1a;
}
.copy {
font-size: 15px;
font-weight: 100;
font-family: 'Quicksand', sans-serif;
}
/* #map {
width: 55%;
height: 200px;
box-sizing: border-box;
text-align: right;
} */
/* end content */
/* footer */
.footer-img {
width: 350px;
margin-right: 15px;
}
h3 {
text-align: center;
font-family: 'Abel', sans-serif;
font-size: 30px;
color: #5d75ab;
text-decoration: none;
margin-top: 10px;
text-transform: uppercase;
}
h4 {
text-align: center;
margin-top: 30px;
text-transform: uppercase;
letter-spacing: 2px;
font-family: 'Abel', sans-serif;
font-size: 24px;
font-weight: 100;
color: #1a1a1a;
}
h5 {
text-align: center;
margin-top: 30px;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
font-weight: 100;
color: #1a1a1a;
}
a href {
text-align: center;
}
a:link {
color: #5d75ab;
text-decoration: none;
}
a:visited {
color: #5d75ab;
text-decoration: none;
}
a:hover {
color: #5d75ab;
text-decoration: none;
color: #1a1a1a;
}
a:active {
color: #5d75ab;
text-decoration: none;
}
.footer-img-container,
.top-row {
margin-top: 30px;
}
.link {
text-align: center;
display: block;
}
/* end footer */
/* Mobile Phone Responsiveness - Nexus 5 */
@media screen and (max-width: 414px) {
h1 {
font-size: 14px !important;
line-height: 80%;
margin-top: 10px;
}
h2 {
font-size: 11px;
letter-spacing: 1.2px;
}
p {
font-size: 12px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 10px;
}
h5 {
font-size: 11px;
}
.logo-img {
width: 180px;
position: absolute;
}
.main-img {
width: 100%;
}
.footer-img {
width: 100%;
}
.line {
width: 90%;
}
.copy {
font-size: 10px;
font-weight: 100;
font-family: sans-serif;
}
}
/* Tablet Responsiveness - IPad */
@media screen and (min-width:416px) and (max-width: 768px) {
h1 {
font-size: 25px;
margin-top: 0px;
}
h2 {
font-size: 20px;
letter-spacing: 2px;
}
p {
font-size: 16px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 12px;
}
.logo-img {
width: 250px;
position: absolute;
}
.main-img {
width: 100%;
}
.footer-img {
width: 100%;
}
.line {
width: 95%;
}
.copy {
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
}
}
解决方案
您可以使用引导图像响应类。
<a href="index.html"><img src="images/logo.png" alt="logo" class="img-responsive"/> </a>
对于 H1 标签,您可以使用媒体查询使其响应字体大小。
h1 {
font-size: 22px;
}
.img-responsive {
width: 100%;
max-width: 200px
}
@media screen and (max-width: 360px) {
h1 {
font-size: 12px !important;
line-height: 80%;
margin-top: 10px;
}
.img-responsive {
width: 100%;
max-width: 100px
}
}
<a href="index.html"><img src="https://www.freelancingdesign.com/wp-content/uploads/2015/04/fd-theme-590x300.jpg" alt="logo" class="img-responsive" /> </a>
<h1>Logo Goes here</h1>
@media screen and (max-width: 360px) {
h1 {
font-size: 12px !important;
line-height: 80%;
margin-top: 10px;
}
}
确保媒体查询 css 应该在主 css 之下,然后它将起作用,序列很重要。
希望这有帮助。
推荐阅读
- c - 如何将指向 int 类型的指针复制到结构数组内的 uint8_t 数组中?
- javascript - 413 帖子上的有效负载太大
- javascript - 使用 aurelia 将图像上传到 asp.net 核心后端
- python - 将文件 A 写入文件 B 后从文件 A 中删除行。或在某个点后将文件 A 中的行移动到新文件 B
- java - 具有依赖项的 Intellij Grade Build Jar
- asp.net - 在 Visual Studio 2017 ASP.NET MVC 中引导之前 Popper 未加载
- model-view-controller - 局部视图中的 MVC 5 动态模型
- ruby-on-rails - NameError:未初始化的常量 ActionDispatch::XmlParamsParser 试图安装 redmine_agile
- webview - 从 Electron 中的 Webview 获取 BrowserView 的大小
- r - 在 Plotly R 中按组汇总数据