工作笔记【五】——媒体查询

鹿时肆

于 2024-10-09 15:36:51 发布

阅读量203

点赞数 6

文章标签：笔记前端 html

本文链接：https://blog.csdn.net/weixin_71798266/article/details/142787300

版权

更新一下今天学到的东西——媒体查询（浅学一下~）

今天的任务是做一个网站的footer，要求在类似手机的设备打开时，footer元素竖向排列，在pc类的设备打开时，footer元素横向排列。

PC端：

手机端：

首先思路就是先做出PC端的样式，再修改，直接贴代码

<template>
	<footer class="footer">
		<div class="footer-content">
			<div class="content">
				<div class="hiii">图</div>
				<div class="con0">
					HIII is an ISO 9001 certIfied enterprise, 
					specialized in development and sales of pet food machiney, 
					food machine and relative packing machine, 
					and has rapidly become a stronger manufacturer after years of innovation and development.
				</div>
			</div>
			<div class="quick-links">
				<span class="span-con">QUICK LINKS</span><br>
				<div class="links">
					<a href="" class="con">Home</a><br>
					<a href="" class="con">Products</a><br>
					<a href="" class="con">Contact Us</a><br>
				</div>
			</div>
			<div class="products">
				<span class="span-con">PRODUCTS</span>
				<div class="con">
					<p>Hiii Surf</p>
					<p>Hiii Boat</p>
					<p>Hiii Stepper</p>
					<p>treadmill </p>
					<p>MetaCosmos ip Land Surfboard</p>
					<p>Yoga Suit</p>
					<p>Hiii Skateboard</p>
					<p>Hiti Flip</p>
				</div>
			</div>
			<div class="contact-us">
				<span class="span-con">CONTACT US</span>
				<div class="con">
					<p>Contact: Mr. Song</p>
					<p>Contact number: +86 138 0531 2637</p>
					<p>Email address: darin@darin.cn</p>
					<p>WhatsApp: +86 138 0531 2637</p>
					<p>Adress: No.1 of Nanhuan Road, Yucheng 251200, China</p>
					<p>Representative: Afsane</p>
					<p>Tari: +98 939 097 7167</p>
				</div>
				<div class="contact-us-con">
					<div class="us-icon1">图</div>
					<div class="us-con1">English</div>
					<div class="us-icon2">图</div>
					<div class="us-con2">|</div>
					<div class="us-con3">Sitemap</div>
				</div>
			</div>
		</div>
		<div class="line"></div>
		<p class="copyright">Copyright © 2024 JINAN DARIN MACHINERY CO., LTD - www.darin.com.cn All Rights Reserved.</p>
	</footer>
</template>

<script>
export default {
	data() {
	    return {
	        show: false
	    }
	}
};
</script>

<style scoped>
.footer {
    background-color: #222;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}

@media (min-width:768px) {
	.contact-us{
		margin-left: 150px;
	}
	.line{
		margin-top: 10px;
	}
}
@media (max-width: 767px) {
    .footer-content {
        flex-direction: column;
        align-items: center; /* 居中对齐子元素 */
    }

	.content{
		display: none;
	}
	
	.quick-links {
	    display: none;
	}
	
	.products {
	    display: none;
	}
	.contact-us{
		margin-left: 25px;
	}
	.line{
		margin-top: 40px;
	}

}

.footer-content {
	width: 100%;
    display: flex;
}
.content{
	width: 312px;
	height: 207px;
	margin-top: 56px;
	margin-bottom: 80px;
	margin-left: 300px;
}
.hiii{
	width: 80px;
	height: 40px;
	border: 1px solid green;
	margin-left: 4px;
	color: #FFFFFF;
}
.con0{
	width: 312px;
	height: 76px;
	margin-top: 21px;
	font-family: Source Han Sans, Source Han Sans;
	font-weight: 300;
	font-size: 12px;
	color: #C8C8C8;
	line-height: 12px;
	text-align: left;
	font-style: normal;
	text-transform: none;
}


.quick-links {
    width: 110px;
    height: 111px;
    margin-top: 57px;
    margin-bottom: 174px;
	margin-left: 100px;
}
.span-con{
	font-family: MicrosoftYaHei, MicrosoftYaHei;
	font-weight: 400;
	font-size: 16px;
	color: #F2F2F2;
	line-height: 16px;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.links{
	margin-top: 25px;
}

.products {
    width: 210px;
    height: 251px;
    margin-top: 57px;
    margin-bottom: 34px;
	margin-left: 100px;
}
.products-con{
	width: 201px;
	height: 210px;
	font-family: Source Han Sans, Source Han Sans;
	font-weight: 300;
	font-size: 14px;
	color: #C8C8C8;
	line-height: 14px;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.con{
	font-family: Source Han Sans, Source Han Sans;
	font-weight: 300;
	font-size: 14px;
	color: #C8C8C8;
	line-height: 14px;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.contact-us {
    width: 347px;
    height: 223px;
    margin-top: 57px;
	
}
.contact-us-con{
	margin-top: 8px;
	display: flex;
	color: #FFFFFF;
}
.us-icon1{
	width: 19px;
	height: 19px;
	border: 1px solid green;
}
.us-con1{
	margin-left: 6px;
	margin-top: 3px;
	width: 38px;
	height: 12px;
	font-family: MicrosoftYaHeiLight, MicrosoftYaHeiLight;
	font-weight: 400;
	font-size: 12px;
	color: #FFFFFF;
	line-height: 12px;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.us-icon2{
	margin-left: 6px;
	border: 1px solid red;
}
.us-con2{
	margin-left: 21px;
	margin-top: 3px;
	color: #FFFFFF;
}
.us-con3{
	margin-left: 20px;
	margin-top: 3px;
	width: 44px;
	height: 12px;
	font-family: MicrosoftYaHeiLight, MicrosoftYaHeiLight;
	font-weight: 400;
	font-size: 12px;
	color: #FFFFFF;
	line-height: 12px;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.line {
    border-top: 1px solid #ccc;
}

.copyright {
    text-align: center;
    font-size: 14px;
    color: #666;
}
</style>

在PC端就是分为四个div块，横向排列，手机端精简了一下内容，只保留了最后一部分，最主要的就是@media，可以理解为css中的if语句。

@media (min-width:768px) {
	.contact-us{
		margin-left: 150px;
	}
	.line{
		margin-top: 10px;
	}
}
@media (max-width: 767px) {
    .footer-content {
        flex-direction: column;
        align-items: center; /* 居中对齐子元素 */
    }

	.content{
		display: none;
	}
	
	.quick-links {
	    display: none;
	}
	
	.products {
	    display: none;
	}
	.contact-us{
		margin-left: 25px;
	}
	.line{
		margin-top: 40px;
	}

}

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

‌@media是CSS3中的一个特性，用于媒体查询‌。

它允许根据设备的特性（如宽度、高度、方向、分辨率等）来应用不同的样式规则。

通过@media，可以为不同的设备实现特定的样式，使页面布局适应移动端、PC端等。

@media的语法规则包括指定设备类型（媒体类型）、设置媒体特征（如最小宽度），并在大括号中定义要应用的CSS样式。

此外，@media还支持逻辑运算符，如not、only和and，用于进一步定义媒体查询的条件。

通过使用@media，可以创建响应式网页设计，使网页在不同设备和屏幕尺寸上都能提供良好的用户体验‌。

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

另外，代码些许潦草简陋，自我感觉有点堆屎山，如有优化欢迎留言