媒体查询能使页面在不同在终端设备下达到不同的效果
媒体查询会根据设备的大小自动识别加载不同的样式
1、设置meta标签
使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
参数解释
①width=device-width：宽度等于当前设备的宽度
②initial-scale：初始的缩放比列（默认设置为1.0）
③maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
④user-scalable：用户是否可以动手缩放（默认设置为no）
（<meta http-equiv="X-UA-Compatible" content="IE=edge">
①基本含义 ：
<meta http - equiv="X - UA - Compatible" content="IE = edge">是一个HTML元数据（meta）标签。它主要用于控制网页在Internet Explorer（IE）浏览器中的兼容性模式。
http - equiv属性是“HTTP等价物”的意思。在这里，它相当于发送一个HTTP头部信息给浏览器。
X - UA - Compatible是这个头部信息的名称，用于告诉浏览器如何渲染页面。
content属性的值`IE = edge`是具体的指令内容。
edge模式意味着让IE浏览器以其最高可用的文档模式来渲染页面，也就是使用最新的引擎来渲染网页，而不是使用兼容模式。
②兼容性模式背景：
在IE浏览器中，为了兼容旧版本的网页，会有不同的文档模式。例如，IE可能会以IE5、IE7、IE8等旧的渲染模式来显示页面，这是为了让那些针对旧版本浏览器设计的网站能够正常显示。
但是，当网页开发者希望使用最新的浏览器特性和渲染引擎来展示页面时，就可以使用<meta http - equiv="X - UA - Compatible" content="IE = edge">标签，强制IE使用最新的模式进行渲染，以提供更好的性能和对现代Web标准的支持。
③实际应用示例：
假设你开发了一个使用HTML5和CSS3新技术的网页，如带有新的CSS弹性盒子布局（display:flex）和HTML5语义化标签（如<section>、<article>等）。如果没有这个标签，IE浏览器可能会以兼容旧版本的模式渲染，导致这些新特性无法正常显示。
比如在一个简单的HTML文件中：
<html>
<!DOCTYPE html>
<html> <head> <meta charset="UTF - 8">
<meta http - equiv="X - UA - Compatible" content="IE = edge">
<title>My Modern Web Page</title>
<style>
body { display: flex;
justify - content: center;
align - items: center;
height: 100vh;
} </style>
</head>
<body>
<h1>Hello, Modern Web!</h1>
</body>
</html>
在这个示例中，<meta http - equiv="X - UA - Compatible" content="IE = edge">标签有助于确保IE浏览器能够以其最新的渲染模式来处理页面中的display:flex等现代CSS特性，从而让页面在IE浏览器中也能尽可能正确地显示。
）
(<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
①含义解释:
这是一个HTML的`<meta>`标签，用于设置视口（viewport）的相关属性。视口是用户在浏览器中看到网页内容的区域。
name="viewport"：表示这个`<meta>`标签是用于定义视口的相关设置。
content属性包含了一系列对视口的具体设置：
width=device - width：这意味着视口的宽度等于设备的宽度。
例如，在移动设备上，视口宽度会根据设备的屏幕宽度进行调整，以确保网页能够在不同尺寸的设备屏幕上合理地显示。这样可以使网页更好地适应手机、平板等各种设备的屏幕，避免出现横向滚动条或者内容显示过小等情况。
initial - scale = 1：初始缩放比例设置为1，即网页在加载时按照原始大小的100%进行显示。这个属性用于控制页面首次加载时的缩放程度。如果设置为0.5，页面会以原始大小的一半显示；设置为2则会以原始大小的两倍显示。
maximum - scale = 1：限制用户最大的缩放比例为1，也就是用户不能将页面放大超过原始大小。这有助于保持页面布局的完整性，防止用户过度放大导致页面排版混乱。
user - scalable = no：表示禁止用户手动缩放页面。在某些情况下，比如网页的布局和设计对尺寸有严格要求，开发者可能不希望用户随意缩放页面，就可以使用这个设置。
②实际应用场景和效果:
以一个响应式网页设计为例，当你开发一个同时适用于桌面和移动设备的网站时，设置width=device - width可以确保移动设备上能够正确地显示网页内容。比如，一个包含图片和文字的新闻网站，在手机上浏览时，文字和图片能够自适应手机屏幕的宽度，不会出现内容被截断或者需要左右滑动才能查看全部内容的情况。
假设你有一个移动应用的网页版，它的界面布局有严格的要求，如一些按钮的位置和大小是固定的，并且希望用户按照设计好的布局来查看和操作。通过设置maximum - scale = 1和user - scalable = no，可以防止用户放大页面而导致按钮位置错乱，从而提供更一致的用户体验。
③与移动设备开发的关系:
在移动设备网页开发中，这个`<meta>`标签是非常重要的。因为移动设备的屏幕尺寸多种多样，通过正确设置视口属性，可以让网页在不同的移动设备上（如不同屏幕尺寸的手机和平板）都能有较好的显示效果。这有助于提高网站的可用性和用户满意度，尤其是在移动互联网时代，大量用户通过手机访问网站，对视口的合理设置可以使网站更好地适应这种趋势。)
2、媒体查询语法
手机屏幕： @media screen and （max-width:768px）{
/*设备小于768px加载样式*/
body{
backgroubd-color:red;
}
}
平板屏幕：@media screen and(max-width:992px)and(min-width:768px){
/*设备小于768px但小于992px加载样式*/
body{
backgroubd-color：pink;
}
}
电脑屏幕：@media screen and (min-width:992px){
/*设备大于992px加载样式*/
body{
background-color:green;
}
}
苹果手机的像素是390*2，他是双倍像素
标签：网页,缩放,32,查询,width,浏览器,H5,IE,页面 From： https://www.cnblogs.com/zhangxiaoguo/p/18593755