更新一下今天学到的东西——媒体查询（浅学一下~）
今天的任务是做一个网站的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，可以创建响应式网页设计，使网页在不同设备和屏幕尺寸上都能提供良好的用户体验。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
另外，代码些许潦草简陋，自我感觉有点堆屎山，如有优化欢迎留言
