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

页面展示效果:

相关推荐
C_心欲无痕17 小时前
浏览器缓存: IndexDB
前端·数据库·缓存·oracle
郑州光合科技余经理17 小时前
技术架构:上门服务APP海外版源码部署
java·大数据·开发语言·前端·架构·uni-app·php
GIS之路17 小时前
GDAL 实现数据属性查询
前端
PBitW18 小时前
2025,菜鸟的「Vibe Coding」时刻
前端·年终总结
mwq3012319 小时前
不再混淆:导数 (Derivative) 与微分 (Differential) 的本质对决
前端
小二·19 小时前
Vue 3 组件通信全方案详解:Props/Emit、provide/inject、事件总线替代与组合式函数封装
前端·javascript·vue.js
研☆香20 小时前
html框架页面介绍及制作
前端·html
be or not to be20 小时前
CSS 定位机制与图标字体
前端·css
DevUI团队20 小时前
🔥Angular高效开发秘籍:掌握这些新特性,项目交付速度翻倍
前端·typescript·angular.js
Moment21 小时前
如何在前端编辑器中实现像 Ctrl + Z 一样的撤销和重做
前端·javascript·面试