页头部分要怎么只通过媒体查询就能实现响应式布局

首页课程实战体系课手记专栏慕课教程

来源：3-2 作业题

慕仰3297879

2020-05-06 14:32:43

一旦我在max768下面把.head-title的样式设为隐藏就会把375的也覆盖掉，案例只教了用栅格系统实现，如果不用栅格系统要怎么实现？也要在html下面再写一层结构吗？请老师讲讲思路

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p class="head-title">imooc</p>

<ul>

<li><a href="###" class="nav-link">Andriod</a></li>

</ul>

</nav>

</header>

var flag =true;

var nav = document.getElementById('nav-item');

btn.onclick = function(){

if(flag){

nav.style.height = '165px';

flag = false

}else{

nav.style.height = 0;

flag = true

}

</script>

</body>

</html>

.sm-container {

width: 100%;

height: 1.5rem;

background-color: #B2C5CC;

color: #fff;

position: relative;

}

@media (max-device-width:768px) {

.sm-container{

width: 100%;

height: 1.5rem;

background-color: #B2C5CC;

color: #fff;

position: relative;

}

.head-title{

display: none;

}

@media (max-device-width:375px) {

.sm-container{

width: 100%;

height: 1.5rem;

background-color: #7EA6B1;

color: #fff;

position: relative;

}

.head-title{

font-size: 0.5rem;

text-align: center;

line-height: 1.5rem;

}

.btn-bar{

width: 0.5rem;

height: 0.5rem;

border: 1px solid #fff;

position: absolute;

right: 0.5rem;

top: 0.5rem;

cursor: pointer;

}

.nav-item{

width: 100%;

height: 0;

background-color: #7EA6B1;

text-align: center;

transition: height 0.5s;

}

.nav-item li{

border-bottom: 1px solid #eee;

}

.nav-link{

color: #fff;

line-height: 0.6rem;

}

写回答

1回答

好帮手慕慕子

2020-05-06

已采纳

同学你好，可以默认是以手机端为基础设置样式，然后通过媒体查询设置ipad端下的样式。老师这里给出一段示例代码，同学可以结合代码测试理解下。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/base.css">
<!-- <link rel="stylesheet" type="text/css" href="css/index.css"> -->
<style>
.sm-container {
width: 100%;
height: 1.5rem;
background-color: #B2C5CC;
color: #fff;
position: relative;
}
/* 默认显示手机端 */
.head-title {
height: 1.5rem;
line-height: 1.5rem;
text-align: center;
font-size: 0.5rem;
}
#btn {
position: absolute;
top: 0;
right: 20px;
bottom: 0;
margin: auto;
width: 0.5rem;
height: 0.5rem;
border: 2px solid red;
}
.nav-item {
position: absolute;
top: 1.5rem;
height: 0;
width: 100%;
overflow: hidden;
text-align: center;
background: #888;
}
.nav-item li a {
color: #fff;
display: block;
line-height: 1rem;
font-size: 0.4rem;
border-bottom: 1px solid #eee;
}
@media (min-width: 768px) {
.head-title,
#btn {
display: none;
}
.nav-item {
position: static;
background: none;
height: 1.5rem;
line-height: 1.5rem;
}
.nav-item li {
display: inline-block;
padding: 0 20px;
}
.nav-item ul a {
border: none;
line-height: 1.5rem;
font-size: 0.6rem;
color: #333;
}
}
/* @media (max-device-width:768px) {
            .sm-container {
                width: 100%;
                height: 1.5rem;
                background-color: #B2C5CC;
                color: #fff;
                position: relative;
            }
            .head-title {
                display: none;
            }
        }
        
        @media (max-device-width:375px) {
            .sm-container {
                width: 100%;
                height: 1.5rem;
                background-color: #7EA6B1;
                color: #fff;
                position: relative;
            }
            .head-title {
                font-size: 0.5rem;
                text-align: center;
                line-height: 1.5rem;
                display: block;
            }
            .btn-bar {
                width: 0.5rem;
                height: 0.5rem;
                border: 1px solid #fff;
                position: absolute;
                right: 0.5rem;
                top: 0.5rem;
                cursor: pointer;
            }
            .nav-item {
                width: 100%;
                height: 0;
                background-color: #7EA6B1;
                text-align: center;
                transition: height 0.5s;
            }
            .nav-item li {
                border-bottom: 1px solid #eee;
            }
            .nav-link {
                color: #fff;
                line-height: 0.6rem;
            }
        } */
</style>
<title>demo</title>
</head>

<body>
<header class="sm-container">
<p class="head-title">imooc</p>
<span class="btn-bar" id="btn"></span>
<nav class="nav-item" id="nav-item">
<ul>
<li><a href="###" class="nav-link">前端</a></li>
<li><a href="###" class="nav-link">java</a></li>
<li><a href="###" class="nav-link">ios</a></li>
<li><a href="###" class="nav-link">Andriod</a></li>
<li><a href="###" class="nav-link">php</a></li>
</ul>
</nav>
</header>
<script type="text/javascript">
(function() {
'use strict';
// dpr->scale = 1 / dpr
var docEl = document.documentElement,
viewportEl = document.querySelector('meta[name="viewport"]'),
dpr = window.devicePixelRatio || 1,
maxWidth = 768,
minWidth = 0;
dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);
docEl.setAttribute('data-dpr', dpr);
docEl.setAttribute('max-width', maxWidth);
docEl.setAttribute('min-width', minWidth);
var scale = 1 / dpr,
content = 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no';
if (viewportEl) {
viewportEl.setAttribute('content', content);
} else {
viewportEl = document.createElement('meta');
viewportEl.setAttribute('name', 'viewport');
viewportEl.setAttribute('content', content);
document.head.appendChild(viewportEl);
}
setRemUnit();
window.addEventListener('resize', setRemUnit);

function setRemUnit() {
var ratio = 18.75;
var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;
// console.log(viewWidth);
if (maxWidth && (viewWidth / dpr > maxWidth)) {
viewWidth = maxWidth * dpr;
} else if (minWidth && (viewWidth / dpr < minWidth)) {
viewWidth = minWidth * dpr;
}
docEl.style.fontSize = viewWidth / ratio + 'px';
}
})();
</script>
<script type="text/javascript">
var flag = true;
var nav = document.getElementById('nav-item');
btn.onclick = function() {
if (flag) {
nav.style.height = '165px';
flag = false
} else {
nav.style.height = 0;
flag = true
}
}
</script>
</body>

</html>

祝学习愉快~

0 学习 · 6815 问题

查看课程

相似问题

关于响应式的实现

回答 1

这个部分都没有给高是怎么撑开的

回答 2

回答 1

滑不到最底部

回答 2

回答 1

打开慕课网App查看更多内容