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

页面展示效果:

相关推荐
卿·静1 分钟前
Node.js终极文本转图指南
前端·javascript·vscode·node.js
EndingCoder2 分钟前
Electron 简介:Node.js 桌面开发的起点
开发语言·前端·javascript·electron·node.js·桌面端
胡八一9 分钟前
使用qianjkun uniapp 主应用 集成 vue微应用
前端·vue.js·uni-app
是罐装可乐31 分钟前
前端架构知识体系:css架构模式和代码规范
前端·css·代码规范·tailwind·bem·css原子化
闲不住的李先森34 分钟前
AI 基础调用实现:从原理到代码实现
前端·llm·全栈
轻语呢喃34 分钟前
async/await:从语法糖到并发优化的异步编程
前端·面试
南雨北斗36 分钟前
Vue 3 中computed的优势
前端
202638 分钟前
15.1 JSON schema- 创建基础样例
前端·javascript
ze_juejin39 分钟前
Linux查看日志常用命令总结
前端
奔赴_向往39 分钟前
Vue 中的 inheritAttrs 属性:深入理解与实战应用
前端