CSS3 @media 查询-----完善不同设备的样式适配

最新推荐文章于 2022-12-09 10:18:31 发布

阿南好难難难

最新推荐文章于 2022-12-09 10:18:31 发布

阅读量950

点赞数

分类专栏： css 笔记文章标签： css3 css html

本文链接：https://blog.csdn.net/linan996/article/details/121202174

版权

css 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

笔记

2 篇文章 0 订阅

订阅专栏

文章目录

一、什么是css自媒体查询
二、用法
三、代码解释
四、效果展示
五、自媒体查询一些常用设备宽度

一、什么是css自媒体查询

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

二、用法

@media mediatype and|not|only (media feature) {
CSS-Code;
}

三、代码解释

@media screen and (max-width: 768px) {//当屏幕宽度小于768px时使用以下的样式代码
		   .div{
		   	background-color: blue;
		   }
		}
		@media (min-width:769px) and (max-width: 1440px) {//当屏幕宽度大于768px小于1440px时使用以下样式代码
		   .div{
		   	background-color: yellow;
		   }
		}

四、效果展示

1.正常分辨率

在这里插入图片描述

2.当屏幕宽度小于768px时

在这里插入图片描述

3.当屏幕宽度在768px与1440px之间

在这里插入图片描述

4.完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自媒体查询</title>
	</head>
	<body>
		<div class="div">
			text
		</div>
	</body>
	<style type="text/css">
	
		.div{text-align: center;
			width: 500px;
			height: 500px;
			background-color: red;
		}
		@media only screen and (max-width: 768px){
		   .div{
		   	background-color: blue ;
		   }
		}
		@media (min-width:768px) and (max-width: 1440px) {
		   .div{
		   	background-color: yellow;
		   }
		}
		
	</style>
</html>

五、自媒体查询一些常用设备宽度

手机，小于 768px
平板，大于等于 768px
桌面显示器，大于等于 992px
大桌面显示器，大于等于 1200px

/**iphone5*/
@media (min-width: 320px) {
  .component {
    width: 300px;
    background: #00ffff;
    font-size: 23px;
  }
}

/**iphone6*/
@media (min-width: 375px) {
  .component {
    width: 360px;
    background: #0000ff;
    font-size: 26px;
  }
}
/**iphone6*/
@media (min-width: 375px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
    background: #6666ff;
  }
}



/**pc*/
@media (max-width: 480px) {
  .component {
    background: #00ff00;
  }
}

/**pc*/
@media (max-width: 767px) {
  .component {
    background: #00ff00;
  }
}

/**pc*/
@media (min-width: 768px) and (max-width: 979px) {
  .component {
    width: 600px;
    background: #00ff00;
    font-size: 30px;
  }
}

/**pc*/
@media (max-width: 979px) {
  .component {
    background: #00fff0;
  }
}


/**pc*/
@media (min-width: 980px) {
  .component {
    width: 900px;
    background: #00ff00;
    font-size: 35px;
  }
}

/**pc*/
@media (min-width: 1200px) {
  .component {
    width: 1000px;
    background: #00ff00;
  }
}

阿南好难難难

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3 @media 查询-----完善不同设备的样式适配

文章目录一、什么是css自媒体查询二、用法三、代码解释四、效果展示1.正常分辨率2.当屏幕宽度小于768px时3.当屏幕宽度在768px与1440px之间4.完整代码五、自媒体查询一些常用设备宽度一、什么是css自媒体查询使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。二、用法@med
复制链接

扫一扫

专栏目录