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

自适应一般什么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,这取决于你希望针对设备的实际宽度还是浏览器的可视窗口宽度应用样式。

posted @   野人也有爱  阅读(170)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示