效果一、
100%是红色
宽<=980px蓝色
<=580px黑色
<=380px黄色
源码:
<style>
/* >980px */
div{
width: 100%;
height: 100px;
background: red;
}
/* <=980px */
@media screen and (max-width: 980px){
div{
background: blue;
}
}
/* <=580px */
@media screen and (max-width: 580px){
div{
background: black;
}
}
/* <=380px */
@media screen and (max-width: 380px){
div{
background: gold;
}
}
</style>
<body>
<div></div>
</body>
效果二、
缩小窗口
用到的图片如上
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>响应式导航</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 14px/22px "宋体", arial, serif;
}
.clearfix::after {
display: block;
clear: both;
content: "";
height: 0;
visibility: hidden;
}
.navbar {
margin-top: 80px;
width: 100%;
background: #333;
}
.nav {
margin: 0 auto;
width: 1000px;
height: 50px;
position: relative;
}
.nav ul {
list-style: none;
}
.nav ul li {
float: left;
}
.nav ul li a {
display: block;
line-height: 50px;
font-size: 16px;
color: #fff;
text-decoration: none;
padding: 0 30px 0 30px;
}
.nav ul li:hover a {
color: #f60;
}
.nav ul li.current {
background: #f60;
}
.nav ul li.current:hover a {
color: #fff;
}
.nav .hot {
display: inline-block;
margin-left: 20px;
line-height: 48px;
position: absolute;
top: 0;
right: 0;
}
.nav .hot a {
padding: 0 5px 0 5px;
font-size: 12px;
color: #fff;
text-decoration: none;
}
.nav .hot a:hover {
color: #f60;
text-decoration: underline;
}
.nav .title {
display: none;
}
@media screen and (max-width: 640px) {
.navbar {
margin-top: 0;
background: #444;
}
.nav {
width: auto;
height: auto;
}
#menu {
display: none;
}
.nav ul li {
margin-top: 1px;
width: 100%;
min-width: 100px;
background: #333;
}
.nav .hot {
display: none;
}
.nav .title {
display: block;
width: 100%;
height: 50px;
background: #333;
text-align: center;
font: normal 20px/35px "Microsoft YaHei", arial, serif;
letter-spacing: 2px;
position: relative;
}
.nav .title a {
color: #f60;
text-decoration: none;
line-height: 50px;
}
.nav .title .btn {
position: absolute;
right: 10px;
top: 8px;
width: 34px;
height: 34px;
background: url(btn.png) center center no-repeat;
cursor: pointer;
}
}
</style>
</head>
<body>
<div class="navbar" class="clearfix">
<div class="nav">
<h1 class="title">
<a href="#">风驰网</a>
<span class="btn"></span>
</h1>
<ul id="menu">
<li class="current">
<a href="#">首页</a>
</li>
<li>
<a href="#">电影</a>
</li>
<li>
<a href="#">电视剧</a>
</li>
<li>
<a href="#">动漫</a>
</li>
<li>
<a href="#">综艺</a>
</li>
<li>
<a href="#">纪录片</a>
</li>
<li>
<a href="#">公开课</a>
</li>
</ul>
<p class="hot">
<a href="#">钢铁侠3</a>
<a href="#">中国合伙人</a>
<a href="#">盛夏晚晴天</a>
<a href="#">陆贞传奇</a>
</p>
</div>
</div>
<script>
var menu = document.querySelector("#menu");
var title = document.querySelector(".title");
title.addEventListener("click", function () {
menu.style.display = menu.style.display == "block" ? "none" : "block";
})
</script>
</body>
</html>
实例三、
效果:
源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片库</title>
<style>
/* CSS初始化 reset.css normalize
各大网站的初始化代码:
https://www.cnblogs.com/liumobai/p/5005623.html
reset.css
https://meyerweb.com/eric/tools/css/reset/
normalize.css(推荐使用)
https://necolas.github.io/normalize.css/
*/
* {
box-sizing: border-box;
}
body {
margin: 0;
}
header {
height: 60px;
line-height: 60px;
background-color: black;
color: white;
text-align: center;
}
main {
margin: 5px;
display: flex;
flex-wrap: wrap;
}
img {
margin: 5px;
/* 100%指父元素main的宽度,40px指每个图片左右外边距之和 */
width: calc((100% - 40px) / 4);
}
/* 媒体设备,all,screen等和操作符可省略,直接写判断
设备宽度<=1150px
*/
@media all and (max-width:1150px) {
img {
width: calc((100% - 30px) / 3);
}
}
@media (max-width:770px) {
img {
width: calc((100% - 20px) / 2);
}
}
@media (max-width:520px) {
img {
margin: 2.5px;
width: calc((100% - 5px));
}
main {
margin: 2px;
}
}
</style>
</head>
<body>
<header>图片库</header>
<main>
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">
<img src="images/5.jpg" alt="">
<img src="images/6.jpg" alt="">
<img src="images/7.jpg" alt="">
<img src="images/8.jpg" alt="">
<img src="images/9.jpg" alt="">
<img src="images/10.jpg" alt="">
<img src="images/11.jpg" alt="">
<img src="images/12.jpg" alt="">
<img src="images/13.jpg" alt="">
<img src="images/14.jpg" alt="">
<img src="images/15.jpg" alt="">
<img src="images/16.jpg" alt="">
<img src="images/17.jpg" alt="">
<img src="images/18.jpg" alt="">
<img src="images/19.jpg" alt="">
<img src="images/20.jpg" alt="">
</main>
</body>
</html>
图片自行找吧
用到的媒体查询不懂的可以参考
CSS长度单位 和 CSS响应式(媒体查询)