响应式布局一个网页在不同设备显示不同效果）meta:vp

最新推荐文章于 2023-12-20 14:44:30 发布

¡Venceremo

最新推荐文章于 2023-12-20 14:44:30 发布

阅读量776

点赞数 1

分类专栏： meta 文章标签：前端

本文链接：https://blog.csdn.net/weixin_47295886/article/details/125939620

版权

meta 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

布局方式

固定宽度布局：width: 12px;height: 13px;---------在不同的设备上不适应

流式布局：百分比设置宽度----------------具有弹性，会出现错位

响应式布局------------检测设备的信息，设备宽度不同，布局效果更好

混合使用

响应式布局

媒体查询（响应式布局其中的一种方式）

media query------------设定网页布局的时候要先检查一下显示设备它的尺寸和宽度

-----------------------------根据不同的显示设备来显示不同的样式设定

viewport视口：显示网页的区域-不同的设备视口不同

在pc端：布局视口-width
在移动设备（手机）设备视觉视口--device-width

响应式布局约定：

视觉视口=布局视口

不可缩放

通过是由meta标签的设定完成的

meta：网页的原数据可以通过name属性去取不同的值，完成不同的网页的基本数据的设定

width=device-width将布局视口的宽度和设备视口的宽度统一在一起

user-scalable=0//scala缩放的意思不可缩放

initial-scale=1.0//初始缩放=1表示没有缩放

maximum-scale=1.0

minimum-scale=1.0

使用快捷键：meta:vp

设备的屏幕宽度

超小屏extra small <768px

小屏 small 768<= small<992

中屏medium 992<=medium <1200

大屏large >=1200

根据不同的屏幕宽度，进行媒体查询，完成响应式布局

min-width: 页面最小宽度

max-width: 页面最大宽度

min-height: 页面最小高度

max-height: 页面最大高度

注意：

and前后带有空格否则无法正确解析
媒体查询的顺序是从上到下进行执行（具有一个覆盖的效果--为了有一个正确的顺序效果，让屏幕尺寸依次增大或者依次减小）
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Document</title>
	<style>
		body{
			background-color: black;
		}
		/*@media 进行媒体查询  screen判断的是屏幕的尺寸 当然可以有其他的*/
		@media screen and (min-width: 768px){/*最小宽度大于768像素*/
			body{
				background-color: pink;
			}
		}
		@media screen and (min-width: 992px){/*最小宽度大于992像素*/
			body{
				background-color: green;
			}
		}
	</style>
</head>
<body>
	
</body>
</html>