vue 根据不同分辨率设置css

最新推荐文章于 2025-06-23 15:12:11 发布

||一见生财||

最新推荐文章于 2025-06-23 15:12:11 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue html css

本文链接：https://blog.youkuaiyun.com/ansinyu/article/details/119294537

vue 同时被 3 个专栏收录

5 篇文章

订阅专栏

html

3 篇文章

订阅专栏

css

3 篇文章

订阅专栏

本文介绍了一种不依赖第三方插件的动态分辨率适配方法。通过CSS媒体查询，针对不同屏幕尺寸定义特定样式，实现了组件在不同分辨率下的自适应布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看到很多用vue的“大神”在实现动态分辨率适配的时候竟然还要引入第三方插件，实在受不了，教教这些人，用css的属性就完全可以实现同页面同组件不同样式的。
直接上代码：

/* 分辨率宽度在1360px以下时 */
<style lang="scss" scoped>
	@media screen and (max-width: 1360px) { 
		//只要设置了这个最大尺寸，就可以根据不同的情况单独设置组件的样式了
		.item-content {
			width: 100px;
		}
	}
</style>