css动态判断屏幕大小

最新推荐文章于 2024-03-20 16:42:15 发布

ঞ᭄阿້໌ᮩ莲໌້ᮨꦿ

最新推荐文章于 2024-03-20 16:42:15 发布

阅读量1.1k

点赞数

分类专栏： css web 文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_41241504/article/details/125908761

版权

web 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

/* 大屏幕 ：大于等于1200px*/
@media (min-width: 1200px) { ... }
 
/*默认*/
@media (min-width: 980px){...}
 
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }
 
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }

用法：

@media screen and (max-width:500px) {
		.showVideo {
			background: #fff;
			padding: 1.8125rem 1.8125rem 3.875rem 1.8125rem;
			/* margin-left: 1rem; */
			background: #FFFFFF;
			border-radius: 0.5rem;
		}
	}

	@media screen and (min-width:500px) {
		.showVideo {
			background: #fff;
			padding: 1.8125rem 1.8125rem 3.875rem 1.8125rem;

			background: #FFFFFF;
			border-radius: 0.5rem;
		}
	}

个人笔记爱看不看，不愿看别叭叭，一天天的乱评论烦死了