引入资源即针对于不同的屏幕尺寸,调用不同的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不同文件

页面展示效果:

相关推荐
传人7 小时前
悬停旋转放大和位移效果如何写
前端·javascript·css
zhangzeyuaaa7 小时前
Ruby 方法参数完全指南:默认值、可变参数与关键字参数
前端·python·ruby
粥里有勺糖7 小时前
视野修炼-技术周刊第135期 | 鼠标跟随宠物
前端·github·aigc
粥里有勺糖7 小时前
拿 Codex 协助清理磁盘,Nice!
前端·后端·github
Highcharts.js8 小时前
可视化商用图表库对比,如何选择?
前端·javascript·学习·信息可视化·highcharts·前端可视化
TheITSea9 小时前
JavaScript Web APIs
开发语言·前端·javascript
恋猫de小郭9 小时前
Android CLI 支持 AI Agent 通过 Device Streaming 调试云真机
android·前端·flutter
Wang's Blog9 小时前
Java 项目实战: 外卖平台优化-前端dist部署与Nginx反向代理rewrite
java·前端·nginx
鬓戈9 小时前
Claude Code frontend-design 插件调研 与 Vue 旧系统风格一致性方案
前端·vue.js·人工智能
IT_陈寒9 小时前
SpringBoot自动配置的坑我帮你踩过了
前端·人工智能·后端