css - 切换电话视图
问题描述
我有切换代码,但它没有显示在电话视图上。如果我删除了最大宽度 750px,它就会出现,但这会打乱 comp 视图。因此,在编写代码的同时,我不能同时让 comp 和 phone 视图都正确。https://citizenssalon.com
<!-- Header -->
<nav class=menu>
<nav class=title>CitizensSalon
<ul class="active">
<link href="Policy.html">
<link href="Writings.html">
<link href="Projects.html">
<li><a href="Writings.html">Blog</a></li>
<li><a href="Policy.html">Policy Proposals</a></li>
<li><a href="Projects.html">Projects</a></li>
</ul>
</nav>
<a class="toggle-nav" href="#">☰</a>
</nav>
CSS 代码
/*----- Toggle Button -----*/
.toggle-nav {
display:none;
}
/*----- Comp View Full Screen -----*/
@media screen and (max-width: 1150px)
{
.wrap {
width:90%;
}
.title {
margin-bottom: 5px;
}
}
/*----- Menu -----*/
@media screen and (min-width: 950px) {
.menu {
width:100%;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background-color:cadetblue;
border: 10px;
}
.salon {
font-size: 5px;
margin-bottom: 10px;
}
.title {
font-size:30px;
}
.menu ul {
display:inline-block;
}
.menu li {
margin:0px 50px 0px 0px;
float:left;
list-style:none;
font-size:17px;
margin-top: 10px;
}
.menu li:last-child {
margin-right:0px;
}
.menu a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:black;
transition:color linear 0.15s;
font-size:20px;
}
.menu a:hover .menu .current-item a {
text-decoration:none;
color:#66a992;
}
@media screen and (max-width: 970px) {
.search-form input {
width:120px;
}
}
@media screen and (max-width: 750px) {
.menu {
position:relative;
display:block;
background-color:cadetblue;
}
.menu ul.active {
display:none;
}
.menu ul {
width:20%;
position:absolute;
top:10%;
right:10px;
padding:10px 10px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:aliceblue;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
right:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:2px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:inline;
}
.toggle-nav {
padding:10px;
float:none;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:white;
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:black;
font-size:30px;
transition:color linear 0.15s;
}
.toggle-nav:hover .toggle-nav .active {
text-decoration:none;
color:#66a992;
}
.search-form {
margin:12px 0px 0px 20px;
float:left;
}
.search-form input {
box-shadow:-1px 1px 2px rgba(0,0,0,0.1);
}
}
.menu {
text-align: center;
border-radius: 2px;
}
.title {
display: inline-block;
border-top: 5px solid black;
border-radius: 0px;
font-size: 5.5rem;
color:azure;
font-family:monospace;
}
解决方案
你忘了@media
用 a 结束你的第一个声明}
,所以你所有的 CSS 代码都在里面@media screen and (max-width: 1150px)
这是固定的CSS:
/*----- Toggle Button -----*/
.toggle-nav {
display:none;
}
/*----- Comp View Full Screen -----*/
@media screen and (max-width: 1150px)
{
.wrap {
width:90%;
}
.title {
margin-bottom: 5px;
}
}
/*----- Menu -----*/
@media screen and (min-width: 950px) {
.menu {
width:100%;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background-color:cadetblue;
border: 10px;
}
.salon {
font-size: 5px;
margin-bottom: 10px;
}
.title {
font-size:30px;
}
.menu ul {
display:inline-block;
}
.menu li {
margin:0px 50px 0px 0px;
float:left;
list-style:none;
font-size:17px;
margin-top: 10px;
}
.menu li:last-child {
margin-right:0px;
}
.menu a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:black;
transition:color linear 0.15s;
font-size:20px;
}
.menu a:hover .menu .current-item a {
text-decoration:none;
color:#66a992;
}
}
@media screen and (max-width: 970px) {
.search-form input {
width:120px;
}
}
@media screen and (max-width: 750px) {
.menu {
position:relative;
display:block;
background-color:cadetblue;
}
.menu ul.active {
display:none;
}
.menu ul {
width:20%;
position:absolute;
top:10%;
right:10px;
padding:10px 10px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:aliceblue;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
right:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:2px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:inline;
}
.toggle-nav {
padding:10px;
float:none;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:white;
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:black;
font-size:30px;
transition:color linear 0.15s;
}
.toggle-nav:hover .toggle-nav .active {
text-decoration:none;
color:#66a992;
}
.search-form {
margin:12px 0px 0px 20px;
float:left;
}
.search-form input {
box-shadow:-1px 1px 2px rgba(0,0,0,0.1);
}
}
.menu {
text-align: center;
border-radius: 2px;
}
.title {
display: inline-block;
border-top: 5px solid black;
border-radius: 0px;
font-size: 5.5rem;
color:azure;
font-family:monospace;
}
推荐阅读
- axis2 - 使用axis2时是否有将日期时间格式设置为UTC的标志?
- ruby - 预提交钩子不忽略排除的文件
- c# - 带镜像输出的打印 JPG 图像
- javascript - 在同步函数中使用 javascript `crypto.subtle`
- git - 如何从 gitlab 中删除提交?(Git-revert 不工作)
- javascript - 在量角器中,如何检查 aria-hidden = "true" 或 "false"
- javascript - ReactJS 组件是否会在 History Forward 上重新加载?
- java - Maven 可以运行非构建任务吗?
- reactjs - 如何使用 ra-data-graphql-simple 添加自定义标题?
- angular - Angular CLI 不会为生产模式下的降级模块生成代码