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

页面展示效果:

相关推荐
初遇你时动了情4 小时前
css中backdrop-filter 详细使用 ios毛玻璃效果、filter和backdrop-filter使用说明
前端·css
景彡先生6 小时前
Python Selenium详解:从入门到实战,Web自动化的“瑞士军刀”
前端·python·selenium
Liudef067 小时前
DeepseekV3.2 实现构建简易版Wiki系统:从零开始的HTML实现
前端·javascript·人工智能·html
景早9 小时前
vue 记事本案例详解
前端·javascript·vue.js
wangjialelele10 小时前
Qt中的常用组件:QWidget篇
开发语言·前端·c++·qt
乔冠宇10 小时前
vue需要学习的点
前端·vue.js·学习
用户479492835691510 小时前
同样是 #,锚点和路由有什么区别
前端·javascript
Hero_112710 小时前
在pycharm中install不上需要的包
服务器·前端·pycharm
爱上妖精的尾巴10 小时前
5-26 WPS JS宏数组元素添加删除应用
开发语言·前端·javascript·wps·js宏
是谁眉眼11 小时前
wpsapi
前端·javascript·html