- 媒体查询

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量253 收藏
点赞数
分类专栏： html和css 文章标签： html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48968230/article/details/123832883
版权

格式：

@media 媒体类型 and (媒体特征) {

样式

}

一、自适应

test10.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自适应</title>
		<!-- 链接样式 -->
		<link rel="stylesheet" type="text/css" href="css/test10.css"/>
	</head>
	<body>
		<div class="box">
			中华
		</div>
	</body>
</html>

 test10.css

*{
	padding: 0;
	margin:0;
}

.box{
	width:100%;
	height: 300px;
	text-align: center;  /* 文本居中 */
}

/* screen设备名称 */
/* 屏幕宽度大于1200px */
@media screen and (min-width:1200px) {
	 .box{
		 background-color: blue;
		 font-size: 100px;
	 }
}

/* 屏幕宽度在980px到1200px */
@media screen and (min-width:980px) and (max-width:1200px) {
	.box{
		background-color: yellow;
		font-size: 50px;
	}
}

/* 屏幕宽度小于980px */
@media screen and (max-width:980px) {
	.box{
		background-color: green;
		font-size: 20px;
	}
}

运行效果：

 

 

二、响应式

test11.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>响应式</title>
		<link rel="stylesheet" media="screen and (min-width:1200px)"  type="text/css" href="css/pc_mee.css"/>
		<link rel="stylesheet" media="screen and (min-width:980px) and (max-width:1200px)" type="text/css" href="css/ipad_mee.css"/>
		<link rel="stylesheet" media="screen and (max-width:980px)" type="text/css" href="css/phone_mee.css"/>
	</head>
	<body>
		<div class="pro_box">
			<!-- 标题 -->
			<div class="title">
				<h2>适用于的工作地点</h2>
			</div>
			<!-- 四个小模块 -->
			<div class="pro_list">
				<ul>
					<li class="item">
						<!-- 图片 -->
						<div class="imgs">
							<img src="img/微软.png" alt="">
						</div>
						<!-- 文案 -->
						<div class="content">
							<h4>windows10 企业版</h4>
							<p>下载适用于IT专业人士的90天免费评估版本</p>
							<a href="#">立即购买</a>
						</div>
					</li>
					<li class="item">
						<!-- 图片 -->
						<div class="imgs">
							<img src="img/微软.png" alt="">
						</div>
						<!-- 文案 -->
						<div class="content">
							<h4>windows10 企业版</h4>
							<p>下载适用于IT专业人士的90天免费评估版本</p>
							<a href="#">立即购买</a>
						</div>
					</li>
					<li class="item">
						<!-- 图片 -->
						<div class="imgs">
							<img src="img/微软.png" alt="">
						</div>
						<!-- 文案 -->
						<div class="content">
							<h4>windows10 企业版</h4>
							<p>下载适用于IT专业人士的90天免费评估版本</p>
							<a href="#">立即购买</a>
						</div>
					</li>
					<li class="item">
						<!-- 图片 -->
						<div class="imgs">
							<img src="img/微软.png" alt="">
						</div>
						<!-- 文案 -->
						<div class="content">
							<h4>windows10 企业版</h4>
							<p>下载适用于IT专业人士的90天免费评估版本</p>
							<a href="#">立即购买</a>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>

 pc_mee.css（电脑端）

*{
	padding:0;
	margin:0;
}

a{
	text-decoration: none;  /* 去掉a链接的下划线 */
}

ul,li{
	list-style: none;   /* 列表去掉小黑点 */
}

.pro_box{
	width: 90%;  /* 用百分比能更好地适应不同分辨率屏幕 90%左右留有间距 */
	margin:0 auto;   /* 盒子居中 */
	/* background-color: #008000;  添加颜色，检验盒子居中效果 */
}

.pro_box  .title h2{
	font-size: 36px;
	line-height: 80px;
}

.pro_list .item{
	float: left;   /* 浮动,让列表元素横排 */
	width:24%;
	margin-right: 1%;   /* 24%+1%=25%  *4=100% */
}

.item  .imgs  img{
	display: block;  /* 转为块元素 */
	width:100%;
}

.item .content h4{
	font-size: 20px;
	margin:20px 0;
}

.item .content p{
	font-size: 18px;
	line-height: 1.2em;
}

.item .content a{
	display: block; /* 转为块元素 */
	font-size: 16px;
	/* 只有先转为块元素，外边距才起作用 */
	margin-top: 10px;
	color: #0000FF;
}

 ipad_mee.css（平板端）

*{
	padding:0;
	margin:0;
}

a{
	text-decoration: none;  /* 去掉a链接的下划线 */
}

ul,li{
	list-style: none;   /* 列表去掉小黑点 */
}

.pro_box{
	width: 90%;  /* 用百分比能更好地适应不同分辨率屏幕 90%左右留有间距 */
	margin:0 auto;   /* 盒子居中 */
	/* background-color: #008000;  添加颜色，检验盒子居中效果 */
}

.pro_box  .title h2{
	font-size: 36px;
	line-height: 80px;
}

.pro_list .item{
	float: left;   /* 浮动,让列表元素横排 */
	width:49%;
	margin-right: 1%;   /* 49%+1%=50%  *2=100% */
	margin-bottom: 30px;
}

.item  .imgs  img{
	display: block;  /* 转为块元素 */
	width:100%;
}

.item .content h4{
	font-size: 20px;
	margin:20px 0;
}

.item .content p{
	font-size: 18px;
	line-height: 1.2em;
}

.item .content a{
	display: block; /* 转为块元素 */
	font-size: 16px;
	/* 只有先转为块元素，外边距才起作用 */
	margin-top: 10px;
	color: #0000FF;
}

 phone_mee.css （手机端）

*{
	padding:0;
	margin:0;
}

a{
	text-decoration: none;  /* 去掉a链接的下划线 */
}

ul,li{
	list-style: none;   /* 列表去掉小黑点 */
}

.pro_box{
	width: 90%;  /* 用百分比能更好地适应不同分辨率屏幕 90%左右留有间距 */
	margin:0 auto;   /* 盒子居中 */
	/* background-color: #008000;  添加颜色，检验盒子居中效果 */
}

.pro_box  .title h2{
	font-size: 36px;
	line-height: 80px;
}

.pro_list .item{
	/* float: left; */  /* 浮动,让列表元素横排 */
	width:100%;
	/* margin-right: 1%; */   /* 49%+1%=50%  *2=100% */
	margin-bottom: 30px;
}

.item  .imgs  img{
	display: block;  /* 转为块元素 */
	width:100%;
}

.item .content h4{
	font-size: 20px;
	margin:20px 0;
}

.item .content p{
	font-size: 18px;
	line-height: 1.2em;
}

.item .content a{
	display: block; /* 转为块元素 */
	font-size: 16px;
	/* 只有先转为块元素，外边距才起作用 */
	margin-top: 10px;
	color: #0000FF;
}

运行效果：

 

 

 

 

搬砖老金牛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css媒体查询设置高度,css-媒体查询中使用的宽度
weixin_36429576的博客
08-03 1977
css-媒体查询中使用的宽度所有设备(例如台式机，平板电脑，笔记本电脑/ Ipad，Iphone和智能手机)最重要的媒体查询宽度是多少？这些设备有标准宽度吗？5个解决方案75 votes我到处都在寻找最佳答案。 在这里，我发现了。@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }@media...
H5 --- 媒体查询
weixin_46064684的博客
10-05 736
媒体查询： 媒体查询是css3新的语法： @media only screen and (min-width: ) { 属性：属性值； } @media only screen and (min-width: 100px) and (max-width: 640px) { 属性：属性值； } screen 用于电脑屏幕，平板电脑，智能手机等。 only 唯一（忽略） and 并且（不常用） min-width 屏幕最小宽度值 max-width 屏幕最大宽度值 媒体查询的作用：
媒体查询如何使用
小柠檬爱编程
04-02 250
媒体查询的用法@media 语法： @media 媒体类型 and (媒体特性) {你的样式} 最大宽度 max-width 是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如： @media screen and (max-width:480px) { .ads { display:none; } } 上面表示的是：当屏幕小于或等于 480px 时，页面中包含类样式 .ads 的元素都将被隐藏。 最小宽度 min-width 与 max-width 相反，指
css媒体查询改变上边距,为什么媒体查询的顺序在CSS中很重要？
weixin_39888412的博客
08-03 143
为什么媒体查询的顺序在CSS中很重要？最近，我一直在设计响应更快的网站，而且我经常使用CSS媒体查询。我注意到的一种模式是定义媒体查询的顺序实际上很重要。我没有在每个浏览器中测试它，只是在Chrome上测试。这种行为有解释吗？有时，当您的网站无法正常工作时会感到沮丧，并且您不确定它是查询还是查询的编写顺序。这是一个例子：HTMLWelcometomywebsiteContactusCSS：...
媒体查询的使用
li_chun_can的博客
08-19 3216
定义 媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。 媒体查询与弹性盒布局的适用情况 媒体查询：当页面的结构发生变化的话最好使用媒体查询。 弹性盒：如果只是宽高的变化，尽量使用弹性盒。 使用方法 <!-- link元
CSS笔记（盒模型以及媒体查询）
banmao8461的博客
07-07 161
1 盒模型（box model） 从CSS的角度看，每一个元素都是一个盒子，这个盒子由内容区（content area）、内边距（padding）、边框（border）以及外边距（margin）四样东西组成。而使用CSS可以对盒子的所有方面加以控制。 边距，无论是外边距还是内边距（包括上下边距），设置的百分数值都是相对于父元素的width 计算 1.1...
前端移动端适配 - 媒体查询适配方案
超逸の学习技术博客
02-10 3499
工作中难免会有写静态页面的需求，有时候移动端适配真的是做的心累，如果自己新做一个页面倒还好，整体布局会按照自己习惯来，但有时候不得不修改别人的代码，尤其是别人没适配好的代码，找样式以及命名规范等问题够折磨一整天了。
html 媒体查询改变字体,CSS----媒体查询设置根节点字体大小
weixin_36341500的博客
06-19 972
CSS----媒体查询设置根节点字体大小/* 字体大小 */@media only screen and (min-width:320px) and (orientation:portrait) {html {font-size: 12px;}}@media only screen and (min-width:360px) and (orientation:portrait) {html {fo...
移动端---媒体查询
VanChaoi的博客
11-24 1649
1.响应式布局介绍:一个html页面适配多个不同的设备 优点:全适配(一个html文件就可以适配所有的屏幕) 缺点:不便于维护(响应式布局其实把多个页面的css写在了一个html中,造成css代码冗余) 2.核心原理:使用媒体查询技术,根据不同的设备尺寸加载不同的样式 3.媒体查询语法 标准语法 @media screen and(设备尺寸) {css样式} 简写: @media(设备尺寸) {css样式} 注意:括号里不需要添加分号 区间查询 设备尺...
Vue - 媒体查询无效
老麦克
03-06 868
踩坑实录：自己用了内联样式，而内联样式具有最高优先级，导致自己的媒体查询无效，解决办法就是把内联样式改为页级，并且放到媒体查询的前面。
前端响应式布局笔记-媒体查询
06-05
媒体查询（Media Queries）是实现响应式布局的核心工具，它允许我们根据设备特性，如视口宽度、设备像素比等，来应用不同的CSS样式。下面将深入探讨媒体查询的原理、语法及在前端开发中的实际应用。 1. 媒体查询...
HarmonyOS应用开发-eTS-媒体查询.docx
05-27
说明 从 API Version 7 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 mediaquery.matchMediaSync matchMediaSync(condition: string):...设置媒体查询的查询条件，并返回对应的监听句柄。
移动WEB开发02-媒体查询.html
04-14
移动WEB开发
移动WEB开发03-媒体查询案例修改背景颜色.html
04-14
移动WEB开发
移动WEB开发04-媒体查询+rem实现元素动态变化.html
04-14
移动WEB开发
探索HTML5的设计原则：引领Web开发的未来方向
s8305057的博客
07-09 521
综上所述，HTML5的设计原则体现了对用户体验、内容可访问性、跨平台兼容性以及未来可扩展性的全面考量。这些原则不仅推动了Web技术的不断进步，也为Web开发者提供了更加丰富和强大的工具集。随着HTML5技术的不断成熟和普及，我们有理由相信，Web应用将变得更加智能、高效和人性化，为用户带来前所未有的体验。作为Web开发者，我们应积极拥抱HTML5及其设计原则，不断探索和创新，共同推动Web技术的未来发展。
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 601
仅对已定位的元素（）有效，默认值为0，可以为负值。
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1112
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1123
title>充电效果
媒体查询
05-31
媒体查询是一种CSS3技术，它允许根据设备的特性和屏幕大小来应用不同的CSS样式。通过使用媒体查询，我们可以编写响应式的网页，使其能够在不同的设备上获得更好的用户体验。 媒体查询通过使用@media规则来实现。在@media规则中，我们可以指定一个或多个媒体类型，如screen、print、speech等，以及一个或多个媒体特性，如宽度、高度、分辨率等。当媒体类型和媒体特性匹配时，该规则中的CSS样式将被应用。 例如，以下媒体查询将在设备宽度小于等于600像素时应用样式： ``` @media screen and (max-width: 600px) { /* CSS样式 */ } ``` 媒体查询是开发响应式网页的重要技术之一，它使得我们可以更好地控制网页在不同设备上的布局和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值