html - 使用媒体查询的徽标及其位置问题
问题描述
正如标题所述,我的此作业的徽标需要以不同的屏幕尺寸出现在屏幕的某些区域中。我已经正确实现了移动定位,但我似乎找不到 ipad 和大屏幕徽标定位的解决方案。
对于大屏幕,徽标需要直接位于第一个.product
元素上方的中心,在我的例子中是Apple 中的 A
对于 ipad 屏幕,徽标需要位于屏幕左边缘和居中h1
元素之间的中间
无论我尝试什么,徽标都保持固定在左侧。
我意识到css
它的位置设置为float:left
但我已将其更改为display:flex
和各种flexbox
属性,但它最终产生了更多问题。我已经更改了每个徽标的位置,@media query
但徽标总是最终保持在原位或远离它需要的位置。
我知道谷歌是我最好的朋友,但我已经用尽了所有可能的方法,已经到了最后的手段。我想做的最后一个是被卡住并立即在此处发布,而无需至少尝试几个小时。请原谅我的新手和可能很明显的问题,但我束手无策,真的需要帮助。谢谢你。
* {
box-sizing: border-box;
text-align: center;
}
body {
font-family: "Roboto", sans-serif;
margin: 0;
padding: 0;
}
body>i> {
flex-grow: 0;
}
body>header> {
flex-grow: 1;
}
.logo>img {
width: 50px;
}
p {
text-align: left;
padding: 15px;
}
.navbar {
background-color: rgb(105, 105, 105);
padding: 10px;
color: white;
width: 100%;
}
.hamburger {
display: flex;
flex-direction: row-reverse;
}
.social {
display: flex;
padding-top: 20px;
flex-direction: row;
justify-content: space-around;
border-top: 2px solid #e2e2e2;
}
ul {
list-style: none;
}
li {
line-height: 5px;
float: right;
padding: 0 0 50px 0;
margin-right: 30px;
margin-top: -10px;
}
.product {
border: 1px solid lightgray;
border-radius: 10px;
margin: 10px 30px;
padding: 10px;
}
@media screen and (max-width: 700px) {
.logo {
float: left;
}
.menu {
display: none;
}
.logo {
float: left;
}
}
@media screen and (max-width: 500px) {
.logo {
float: none;
}
.menu {
display: none;
}
}
@media screen and (min-width: 900px) {
.hamburger {
display: none;
}
.product {
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid lightgray;
border-radius: 10px;
margin-left: 30px;
margin-right: 30px;
width: 50%;
text-align: center;
margin-top: -20px;
margin-bottom: 0px;
}
main {
display: inline-flex;
}
.logo {
position: absolute;
left: 0;
top: 25;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<div class="logo"><img src="https://uploads.codesandbox.io/uploads/user/6eb75550-4d51-47fd-8ec1-d216b5da5e5c/M4sq-logo.jpeg" /></div>
<h1>The ABC Company</h1>
</header>
<nav class="navbar">
<div class="hamburger">☰</div>
<ul class="menu">
<li>Help</li>
<li>Products</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
<main>
<section class="product">
<i class="fas fa-apple-alt fa-5x"></i>
<h2>A as in Apple</h2>
<p>
We take out fruit very seriously at ABC, that is why the A in ABC is for Apple. Try our new AppleBook App, the coolest new technology disrupting the fruit industry. This is the Uber of Apples!
</p>
</section>
<section class="product">
<i class="fas fa-money-bill-wave fa-5x"></i>
<h2>B as in Bail</h2>
<p>
Do you need Bail! Our new BailFace app will provide you with lawyers and bail money at the push of a button. Its the Facebook of bail bonds!
</p>
</section>
<section class="product">
<i class="fas fa-utensils fa-5x"></i>
<h2>C as in Curry</h2>
<p>
Fancy some curry! Our new HurryCurry app will provide curry cooked by Italian chefs right to your door. Its the AirBnB of curry!
</p>
</section>
</main>
<footer>
<ul class="social">
<li class="social_icon"><i class="fab fa-twitter"></i></li>
<li class="social_icon"><i class="fab fa-facebook"></i></li>
<li class="social_icon"><i class="fab fa-instagram"></i></li>
</ul>
</footer>
</body>
</html>
解决方案
首先对不起我的英语,我不流利,我的解决方案建议,我冒昧地改变了你的css中的一些东西。
<html lang="en">
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css" />
</head>
<style>
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
}
.navbar {
display: flex;
flex-direction: row-reverse;
width: 100vw;
background-color: rgb(105, 105, 105);
color: white;
}
.hamburger {
display: flex;
flex-direction: row-reverse;
align-content: center;
align-self: center;
justify-content: flex-start;
margin-right: 10px;
display: none;
}
.social {
display: flex;
padding-top: 20px;
flex-direction:row;
justify-content:space-around;
border-top: 2px solid #e2e2e2;
}
.menu{
display: inherit;
list-style: none;
}
.navbar ul li {
display: inline;
padding: 0 15px;
}
.product {
border: 1px solid lightgray;
border-radius: 10px;
margin: 10px 30px;
padding:10px;
}
header{
display: flex;
flex-direction: row;
}
header h1 {
display: inherit;
flex-grow: 1;
align-content: center;
align-self: center;
align-items: center;
justify-content: flex-start;
}
.logo{
display: inherit;
align-content: center;
align-self: center;
align-items: center;
flex-grow: 1;
justify-content: center;
}
.logo > img{
width: 50px;
height: 50px;
}
@media (max-width: 900px) {
.hamburger {
display: none;
}
main{
display: flex;
flex-direction: column;
justify-content: center;
}
.product {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
align-self: center;
align-content: center;
border: 1px solid lightgray;
border-radius: 10px;
width: 50vw;
text-align: center;
}
}
@media (max-width:700px){
.navbar ul li{
display: none;
}
.hamburger{
display: block;
}
}
@media (max-width: 400px){
header h1 {
display: inherit;
flex-grow: 1;
align-content: center;
align-self: center;
align-items: center;
justify-content: flex-start;
font-size: 1.5rem;
}
}
</style>
<body>
<header>
<div class="logo"><img src="https://uploads.codesandbox.io/uploads/user/6eb75550-4d51-47fd-8ec1-d216b5da5e5c/M4sq-logo.jpeg"/></div>
<h1>The ABC Company</h1>
</header>
<nav class="navbar">
<div class="hamburger">☰</div>
<ul class="menu">
<li>Help</li>
<li>Products</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
<main>
<section class="product">
<i class="fas fa-apple-alt fa-5x"></i>
<h2>A as in Apple</h2>
<p>
We take out fruit very seriously at ABC, that is why
the A in ABC is for Apple. Try our new AppleBook App,
the coolest new technology disrupting the fruit industry.
This is the Uber of Apples!
</p>
</section>
<section class="product">
<i class="fas fa-money-bill-wave fa-5x"></i>
<h2>B as in Bail</h2>
<p>
Do you need Bail! Our new BailFace app will provide you
with lawyers and bail money at the push of a button. Its the
Facebook of bail bonds!
</p>
</section>
<section class="product">
<i class="fas fa-utensils fa-5x"></i>
<h2>C as in Curry</h2>
<p>
Fancy some curry! Our new HurryCurry app will provide curry
cooked by Italian chefs right to your door. Its the AirBnB of curry!
</p>
</section>
</main>
<footer>
<ul class="social">
<li class="social_icon"><i class="fab fa-twitter"></i></li>
<li class="social_icon"><i class="fab fa-facebook"></i></li>
<li class="social_icon"><i class="fab fa-instagram"></i></li>
</ul>
</footer>
</body>
</html>
推荐阅读
- python - 如何在不换行的情况下打印完整的 NumPy 数组(在 Jupyter Notebook 中)
- docker - kata 容器可以用作沙箱来运行不受信任的代码吗?
- python - 在 Selenium 中一次加载多个 URL
- java - @ManyToOne JPA spring mysql 插入错误,列为空
- java - Spring YAML 属性如何引用对象类型的另一个属性
- android - 如何将谷歌云语音中的 API 密钥验证为 android 中的文本 API?
- web - 恢复到标准 Stack Overflow 网页界面(无动画)
- javascript - How to convert object into array in angularjs
- service - What is the @Service annotation in Apache Felix?
- python - Tensorflow conv2d_transpose 参数无效错误