媒体查询—引入资源
一、通俗的理解
1.当用户使用不同尺寸的屏幕查看，呈现的样式不同，并且各自的样式比较复杂，那么就可以把不同尺寸样式单独写一个文件，然后使用
<link rel="stylesheet" href="">进行引入
二、示例
例如：当屏幕小于800px，一行只显示一个盒子，屏幕大于等于800px，一行显示两个盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体查询-引入资源</title>
<link rel="stylesheet" href="./css/small.css" media="screen and (max-width: 799px)">
<link rel="stylesheet" href="./css/large.css" media="screen and (min-width: 800px)">
</head>
<body>
<div></div>
<div></div>
</body>
</html>
样式
#small.css
div{
width: 100%;
height: 200px;
}
div:nth-child(1){
background-color: coral;
}
div:nth-child(2){
background-color: skyblue;
}
#large.css
div {
float: left;
width: 50%;
height: 200px;
}
div:nth-child(1) {
background-color: coral;
}
div:nth-child(2) {
background-color: skyblue;
}
三、效果
本文来自博客园，作者：弩哥++，转载请注明原文链接：https://www.cnblogs.com/bangbangzoutianya/p/17582381.html
分类:
css
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳，地球，月球 运作规律
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」