老师帮看一下这个对不?
来源:3-4 自由编程
要每天学习的小蓝同学
2021-11-03 00:06:37
相关代码:css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-size: 12px;
color: #6d655b;
}
a {
font-size: 12px;
color: #686868;
text-decoration: none;
}
li {
list-style: none;
}
img {
vertical-align: top;
border: none;
width: 100%;
}
body,html{
width: 100%;
height: 100%;
}
.header-container {
position: fixed;
left: 0;
top: 0;
z-index: 1000;
height: 2.5rem;
width: 100%;
background-color: #ccc;
}
.navbar {
display: flex;
height: 100%;
align-items: center;
justify-content: space-around;
}
.navbar-logo,
.navbar-download{
display: flex;
justify-content: center;
align-items: center;
width: 3.75rem;
}
.navbar-logo {
height: 2.5rem;
}
img {
height: 100%;
}
.navbar-download {
height: 2rem;
background-color: pink;
border-radius: 3.75rem;
}相关代码:
<body> <header class="header-container"> <div class="navbar"> <div class="navbar-logo"> <img src="img/logo.png" alt=""> </div> <div class="navbar-download"> <p>下载APP</p> </div> </div> </header> </body>
通用适配js就是课程那个
1回答
同学你好,作业适配不同设备下的header是ok的,但细节上也要注意,如logo宽高,logo与下载按钮两侧间距~。

优化如下:


如同学拿不准用什么标准来测试的话,老师建议同学用iphone6/7/8来测,即便是今后公司有要求,也一定要看看iphone6/7/8。
祝学习愉快~
相似问题