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

当样式比较繁多的时候,我们可以针对不同的媒体使用不同 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不同文件

页面展示效果:

相关推荐
拖拉斯旋风几秒前
深入浅出 RAG:从网页爬取到智能问答的完整链路解析
前端
Mintopia14 分钟前
Vite 发展现状与回顾:从“极致开发体验”到生态基础设施
前端
前端双越老师37 分钟前
前端面试常见的 10 个场景题
前端·面试·求职
孟祥_成都1 小时前
【全网最通俗!新手到AI全栈开发必读】 AI 是如何进化到大模型的
前端·人工智能·全栈
牛奶2 小时前
AI辅助开发的基础概念
前端·人工智能·ai编程
摸鱼的春哥2 小时前
Agent教程15:认识LangChain,Agent框架的王(上)
前端·javascript·后端
明月_清风3 小时前
自定义右键菜单:在项目里实现“选中文字即刻生成新提示”
前端·javascript
明月_清风3 小时前
告别后端转换:高质量批量导出实战
前端·javascript
刘发财7 小时前
弃用html2pdf.js,这个html转pdf方案能力是它的几十倍
前端·javascript·github
牛奶10 小时前
2026年大模型怎么选?前端人实用对比
前端·人工智能·ai编程