前端自适应写法--媒体查询

发布时间 2023-06-27 22:08:22作者: 野人也有爱

自适应一般什么rem,vw,vh这些单位注意一下。还有就是一些bootStrap什么的。在这里主要写一下媒体查询的方式。

使用CSS中的媒体查询来根据不同的屏幕尺寸应用不同的样式。以下是如何使用媒体查询分别为320px-480px范围内、768px-1024px范围内和大于1024px的屏幕尺寸编写CSS样式:

/* 适用于320px-480px范围内的屏幕 */
@media screen and (min-width: 320px) and (max-width: 480px) {
/* 这里是你的CSS样式 */
}

/* 适用于768px-1024px范围内的屏幕 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* 这里是你的CSS样式 */
}

/* 适用于大于1024px的屏幕 */
@media screen and (min-width: 1024px) {
/* 这里是你的CSS样式 */
}

 

注意,这些媒体查询可以根据你的具体需求进行调整,例如你可能想要使用min-device-widthmax-device-width代替min-widthmax-width,这取决于你希望针对设备的实际宽度还是浏览器的可视窗口宽度应用样式。