当前位置： 首页 > news >正文

引入资源即针对于不同的屏幕尺寸，调用不同的css文件

news 2025/9/2 15:19:22

当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets（样式表）。

原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。

语法：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

案例：

有两个div，当我们的屏幕大于等于640px以上的，我们让div一行显示2个，当我们屏幕小于640 我们让div一行显示1个。

分别创建两个css样式

利用link引入css不同文件

页面展示效果：

http://www.dtcms.com/a/354757.html

相关文章：

  • 开发避坑指南(41)：Vue3 提示框proxy.$modal.msgSuccess()提示文本换行解决方案
  • 腾讯混元开源视频拟音模型，破解 AI 视频 “无声” 难题
  • vscode 远程ssh登录免手动输入密码
  • 20.22 QLoRA微调实战：中文语音识别数据准备全流程解密
  • 音合成之二十四 微软VibeVoice语音合成模型
  • 2025通用证书研究：方法论、岗位映射与四证对比
  • 【Bluedroid】A2DP Source设备音频数据读取机制分析(btif_a2dp_source_read_callback)
  • Unity 打包 iOS，Xcode 构建并上传 App Store
  • Java 大视界 -- 基于 Java 的大数据实时流处理在智能电网分布式电源接入与电力系统稳定性维护中的应用（404）
  • mac中进行适用于IOS的静态库构建
  • 【大前端】React Native 调用 Android、iOS 原生能力封装
  • 基于FPGA的情绪感知系统设计方案：心理健康监测应用（五）
  • Ckman部署clickhouse
  • Qt基础_xiaozuo
  • Groovy集合常用简洁语法
  • linux mysql 数据库启动异常问题记录
  • KafKa学习笔记
  • AT_abc407_e [ABC407E] Most Valuable Parentheses
  • 前端开发中的CSS变量管理：实现缓存与响应式更新
  • 从 WPF 到 Avalonia 的迁移系列实战篇3：ResourceDictionary资源与样式的差异与迁移技巧
  • CuTe C++ 简介01，从示例开始
  • wpf之ListBox
  • 一个客户端直接掉线或断点，服务器怎么快速识别
  • 通过代码认识 CNN：用 PyTorch 实现卷积神经网络识别手写数字
  • audioMAE模型代码分析
  • 循环神经网络——pytorch实现循环神经网络（RNN、GRU、LSTM）
  • 深度学习——卷积神经网络（PyTorch 实现 MNIST 手写数字识别案例）
  • SpringBoot项目使用Liquibase 数据库版本管理
  • Day16_【机器学习—KNN算法】
  • IDA Pro 逆向分析快捷键大全及核心用法详解