移动端和PC端媒体查询

最新推荐文章于 2024-04-28 19:39:51 发布

.Deity

最新推荐文章于 2024-04-28 19:39:51 发布

阅读量432

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_68189681/article/details/123950111

版权

<!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" />
		<style>
			* {margin: 0;padding: 0;}
			.box {
				width: 100%;
			}
			
			.box div{
				width: 25%;
				height: 200px;
				background-color: #FFC0CB;
				float: left;
				border: 1px solid black;
				box-sizing: border-box;
			}
			 /* 设备最大宽度1200px的样式 */
	/* 		 @media screen and (max-width: 1200px){
			 	
			 } */
			 
			 /* 平板 */
			 @media screen and (max-width: 768px){
			 	.box div{
			 		width: 50%;
			 	}
			 }
			 
			 /* 手机 */
			 @media screen and (max-width: 480px){
				 .box div{
					width: 100%;
				 }
			 }
			 /* 注意：如果是写max-width 那么必须从大到小写，如果是写min-width，那么设备就要从小往大写 */
		</style>
	</head>
	<body>
		<div class="box">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>	
	</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

.Deity

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端和PC端媒体查询

<!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" /> <style>.
复制链接

扫一扫