bootatrap：媒体查询_bootstrap 媒体查询

作者：花生_TL007 | 2024-05-12 13:43:09

踩

bootstrap 媒体查询

通过代码实现：随着用户屏幕或者窗口大小的调整，实现内容的变化，主要应用同一项目，移动端和pc端的变化（不过col简洁，好用）或者是一些特定的宽度，col无法实现的特殊需求


<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--移动端兼容-->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--引用外部文件1-->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<style>
			@media only screen and (max-width:576px  n ) {
				p{
					width: 100%;
					background: pink;
				}
			}
	
			@media screen and (min-width:576px) and (max-width:768px) {
				p {
					background: red;
					text-align: right;
					width: 540px;
				}
			}
			
			@media screen and (min-width:768px) and (max-width:992px) {
				p {
					background:plum;
					text-align: right;
					width: 720px;
				}
			}
			
			@media screen and (min-width:992px) and (max-width:1200px) {
				p {
					background: #0000FF;
					text-align: right;
					width: 960px;
				}
			}
			
			@media screen and (min-width:1200px) {
				p {
					background: yellow;
					text-align: center;
					width: 1140px;
				}
			}
		</style>
	</head>
 
	<body>
		<p>北京欢迎你</p>	
	</body>
	<!--引用外部文件2-->
	<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<!--引用外部文件3-->
	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
 
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/559194