引言
忘记了媒体查询是怎么用的了, 看了一下文档, 随手写的最基本的实现思路, 超级简陋, 不要嫌弃. 图片替换一下就能看到效果.嗯… 还是把文件也存上来吧. 记一下, 下次再忘了直接看一眼就可以了.
CSS3 Media 媒体查询最基本用法
@media screen and (min-width: 768px) {
.box {
background-color: red;
}
}
最基本实现原理: 控制元素的显示与隐藏
@media screen and (min-width: 768px) {
description {
.goods_box: none; // 在大于768px的的设备上, 隐藏 ..goods_box 元素
}
}
index.Css 文件
* {
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
/* @media screen and (min-width:768px) {
.brand {
background-color: red;
}
} */
/* PC端 */
@media screen and (min-width: 768px){
/* 背景大图 */
.banner {
width: 100%;
height: 400px;
background-image: url(../img/banner_01.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
nav {
width: 100%;
height: 50px;
background-color: rgba(0, 0, 0, .3);
color: white;
}
.logo {
float: left;
font-size: 24px;
font-weight: 700;
margin-left: 15px;
line-height: 50px;
}
.nav {
float: right;
margin-right: 20px;
font-size: 16px;
}
.nav ul li {
float: left;
margin-left: 15px;
margin-right: 15px;
line-height: 50px;
}
.description {
display: none;
}
.brand {
width: 72%;
/* height: 860px; */
margin: 0 auto;
margin-top: 40px;
}
.line {
width: 95%;
height: 2px;
background-color: black;
}
.box {
width: 100%;
margin-top: 40px;
}
.box ul {
width: 100%;
display: flex;
flex-wrap: wrap;
/* float: left; */
}
.box ul li {
/* float: left; */
width: 30%;
margin: 5px;
}
.box ul li img {
width: 100%;
}
footer {
width: 100%;
height: 100px;
border-top: 1px solid transparent;
background-color: #ebebec;
margin-top: 30px;
}
.link {
width: 100%;
height: 60px;
margin-top: 30px;
text-align: center;
}
}
/* 手机端 */
@media screen and (max-width: 768px){
/* 背景大图 */
.banner {
width: 100%;
height: 200px;
background-image: url(../img/banner_01.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: pink;
}
nav {
width: 100%;
height: 50px;
background-color: rgba(0, 0, 0, .3);
color: white;
}
.logo {
float: left;
font-size: 20px;
font-weight: 700;
margin-left: 15px;
line-height: 50px;
}
.nav {
float: right;
margin-right: 10px;
font-size: 14px;
}
.nav ul li {
float: left;
margin-left: 5px;
margin-right: 5px;
line-height: 50px;
}
.brand {
display: none;
}
.description {
width: 85%;
/* height: 860px; */
margin: 0 auto;
margin-top: 40px;
}
.box {
width: 100%;
height: 160px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 20px 0 0 0 ;
position: relative;
margin-top: 10px;
}
.box .text {
float: left;
width: 60%;
height: 100%;
font-size: 12px;
}
.box img {
width: 40%;
height: 100px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%)
}
.mobile_img {
width: 100%;
margin-top: 40px;
}
.mobile_img ul {
width: 100%;
display: flex;
flex-wrap: wrap;
/* float: left; */
}
.mobile_img ul li {
/* float: left; */
width: 100%;
}
.mobile_img ul li img {
width: 100%;
}
footer {
width: 100%;
height: 100px;
border-top: 1px solid transparent;
background-color: #ebebec;
margin-top: 30px;
}
.link {
width: 100%;
height: 60px;
margin-top: 20px;
text-align: center;
font-size: 12px;
}
}
Index.html 文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>index</title>
<!-- 引入css文件 -->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 背景大图 -->
<div class="banner">
<nav>
<div class="logo">
DSY DESIGN
</div>
<div class="nav">
<ul>
<li>品牌</li>
<li>环境</li>
<li>交互</li>
<li>书籍</li>
<li>关于</li>
</ul>
</div>
</nav>
</div>
<!-- 品牌模块 PC端显示 -->
<div class="brand">
<h3>品牌</h3>
<div class="line"></div>
<div class="box">
<ul>
<li><img src="./img/pc_img_01.png"></li>
<li><img src="./img/pc_img_02.png"></li>
<li><img src="./img/pc_img_03.png"></li>
<li><img src="./img/pc_img_04.png"></li>
<li><img src="./img/pc_img_05.png"></li>
<li><img src="./img/pc_img_06.png"></li>
<li><img src="./img/pc_img_07.png"></li>
<li><img src="./img/pc_img_08.png"></li>
<li><img src="./img/pc_img_09.png"></li>
</ul>
</div>
</div>
<!-- 公司介绍 -->
<div class="description">
<h3>辉腾科技</h3>
<div class="box">
<div class="text">
<p>项目执行于2018年项</p>
<p> 目执行于2018年项目执行于2018年项目执行于2018</p>
<p>目执行于2018年项目执行于2018年项目执行于2018</p>
<p>年项目执行于2018年项目执行于2018年项目执行于</p>
<p>2018年项目执行于2018年项。</p>
</div>
<img src="./img/pc_img_01.png">
</div>
<div class="mobile_img">
<ul>
<li><img src="./img/mobile_img_01.png"></li>
<li><img src="./img/mobile_img_02.png"></li>
<li><img src="./img/mobile_img_03.png"></li>
<li><img src="./img/mobile_img_04.png"></li>
<li><img src="./img/mobile_img_05.png"></li>
</ul>
</div>
</div>
<footer>
<div class="link">
<p>友情链接:郑州XX网络科技 | XX设计事务所 | 郑州XX科技有限公司 | 郑州XX文化传播有限公司</p>
<p>版权所有 DSY DESIGN / 豫ICP备060290XX号</p>
</div>
</footer>
</body>
</html>
百度网盘下载地址, 有网页psd文件与切好的图片
链接:https://pan.baidu.com/s/1K1Fo6ytRMWGUMNFU7hSniA
提取码:twls