CSS3媒体查询

最新推荐文章于 2022-07-29 20:27:05 发布

这名没人用吧

最新推荐文章于 2022-07-29 20:27:05 发布

阅读量132

点赞数 2

分类专栏： css基础知识文章标签： css3

本文链接：https://blog.csdn.net/weixin_43866830/article/details/115266558

版权

css基础知识专栏收录该内容

10 篇文章 0 订阅

订阅专栏

媒体查询

一、响应式布局
二、媒体查询
- 1.语法结构
- 2.具体使用

一、响应式布局

如果我们PC端的页面直接在移动端观看的时候，网页会直接进行缩放，这样子会导致字体过小等问题，造成用户的体验不佳，因此在以前都是编写多套代码，来应用于不同的设备中，而这种开发方式成本高、不易维护，响应式布局则很好地解决了这个问题，它可以让一个网站能够兼容多个终端，而想要实现响应式布局，就需要媒体查询。

二、媒体查询

媒体查询就是通过查询当前属于哪种设备，然后针对不同的媒体类型定制不同的样式规则，让网页能够在不同的设备下正常的预览。

1.语法结构

@media not | only mediatype and (expressions){
	/*css代码;*/
}

2.具体使用

上述的not表示排除某种媒体类型，only表示指定某种媒体类型。expressions表示的是媒体的特性，它描述了输出设备的具体特征。媒体类型常见的值有：

媒体类型	说明
all	适用于所有设备（默认）
print	适用于打印样式，主要是背景清除、字体颜色变黑等
screen	主要用于屏幕、电脑屏幕、平板电脑、智能手机
speech	主要用于屏幕阅读器等发声设备

媒体特性常见的值有：

媒体特性	例子
屏幕的宽度和高度	width、height
屏幕的方向	orientation：landscape或portrait
屏幕的分辨率	resolution
屏幕的高宽比	aspect-ratio

媒体特性是CSS3新增的内容，多数的媒体特性带有“min-”和“max-”前缀，用于表达“大于等于”和“小于等于”。这避免了使用与html和xml冲突的“<”和“>”字符。这里需要注意的是，==媒体特性必须使用括号()包起来，否则无效。
由于手机端的尺寸一般是在320px到576px，因此我们可以设置手机端媒体查询为：

@media screen and (max-width:576px){
	/*CSS代码*/
}

平板设备尺寸一般是在768px到1024px，因此我们可以设置平板的媒体查询为：

@media screen and (min-width:768px) and (max-width:1024px){
	/*CSS代码*/
}

电脑端的尺寸一般是在1024px以上，因此我们可以设置电脑的媒体查询为：

@media screen and (min-width:1024px){
	/*CSS代码*/
}

媒体查询在平时还会用于区分屏幕的横竖状态下的样式：

@media screen and (orientation:portrait){/*竖屏*/
	/*CSS代码*/
}
@media screen and (orientation:landscape){/*横屏*/
	/*CSS代码*/
}

同时媒体查询还可以用于设置分辨率和宽高比：

@media screen and (min-resolution:90dpi){/*分辨率*/
	/*CSS代码*/
}
@media screen and (min-aspect-ratio:16/9){/*宽高比*/
	/*CSS代码*/
}

接下来是不同尺寸设备的演示：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		.box{
			width: 100%;
			height: 500px;
			background-color: #00FFFF;
			text-align: center;
			line-height: 50px;
		}
		.box::before{
			content: 'size > 1024';
			display: block;
		}
		@media screen and (max-width:576px){
			.box{
				background-color: #008000;
			}
			.box::before{
				content: 'size <= 576';
			}
		}
		@media screen and (min-width:768px) and (max-width:1024px){
			.box{
				background-color: #556677;
			}
			.box::before{
				content: '768 <= size <= 1024';
			}
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

当在电脑端时，即页面尺寸大于1024时：
在这里插入图片描述
当页面尺寸为手机端时：

当页面为平板端时：

横竖屏等的设置也是和尺寸一样的，这里就不再作演示啦。
这一部分的内容到这里就结束啦，如果有不足的地方也希望大家可以帮我指出来，蟹蟹！
在这里插入图片描述

这名没人用吧

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3媒体查询

前端学习之CSS3一、响应式布局二、媒体查询1.语法结构一、响应式布局如果我们PC端的页面直接在移动端观看的时候，网页会直接进行缩放，这样子会导致字体过小等问题，造成用户的体验不佳，因此在以前都是编写多套代码，来应用于不同的设备中，而这种开发方式成本高、不易维护，响应式布局则很好地解决了这个问题，它可以让一个网站能够兼容多个终端，而想要实现响应式布局，就需要媒体查询。二、媒体查询媒体查询就是通过查询当前属于哪种设备，然后针对不同的媒体类型定制不同的样式规则，让网页能够在不同的设备下正常的预览
复制链接

扫一扫