html 中视口元标记的确切作用是什么?
What exactly viewport meta tag does in html?
我最近开始学习 html 和 css。特别是,我正在学习响应式网页设计。我研究过元视口标签是创建响应式网页设计的第一步。特别是,我正在学习这个 link:
https://www.w3schools.com/css/css_rwd_viewport.asp
在这里,他们给出了带有和不带视口标签的移动屏幕上网站的两张图片。在第一个没有屏幕的情况下,图像不会随屏幕一起调整。但在后一幅图像中,图像会自行调整。现在,我明白这一点了。我想使用以下方法复制它:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<img src="jeff.jpg">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing sof</p>
</body>
</html>
当我改变宽度时,它不会改变图像。那么,这是怎么回事?
我知道,我可以通过放置一个 width:100% 的 css 块来解决这个问题,但我想了解为什么视口无法像网站上提到的那样工作。还是我遗漏了什么重要的东西?
视口元素向浏览器提供有关如何控制页面尺寸和缩放比例的说明。
width=device-width 部分设置页面的宽度以跟随设备的屏幕宽度(这将因设备而异)。
initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。
浏览器的视口是 window 可以看到网页内容的区域。
宽度属性 控制视口的大小。它可以设置为特定数量的像素,如 width=600 或特殊值 device-width,即屏幕宽度 CSS 像素,比例为 100%。
initial-scale 属性 控制首次加载页面时的缩放级别。
现在,为了使图像在本质上具有响应性,我们应该始终使用 viewport-relative units
,即 %
所以,你应该添加
img {
width: 100%;
height: auto;
}
图片随屏幕大小调整。希望能解开你的疑惑!
我最近开始学习 html 和 css。特别是,我正在学习响应式网页设计。我研究过元视口标签是创建响应式网页设计的第一步。特别是,我正在学习这个 link:
https://www.w3schools.com/css/css_rwd_viewport.asp
在这里,他们给出了带有和不带视口标签的移动屏幕上网站的两张图片。在第一个没有屏幕的情况下,图像不会随屏幕一起调整。但在后一幅图像中,图像会自行调整。现在,我明白这一点了。我想使用以下方法复制它:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<img src="jeff.jpg">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing sof</p>
</body>
</html>
当我改变宽度时,它不会改变图像。那么,这是怎么回事?
我知道,我可以通过放置一个 width:100% 的 css 块来解决这个问题,但我想了解为什么视口无法像网站上提到的那样工作。还是我遗漏了什么重要的东西?
视口元素向浏览器提供有关如何控制页面尺寸和缩放比例的说明。
width=device-width 部分设置页面的宽度以跟随设备的屏幕宽度(这将因设备而异)。
initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。
浏览器的视口是 window 可以看到网页内容的区域。
宽度属性 控制视口的大小。它可以设置为特定数量的像素,如 width=600 或特殊值 device-width,即屏幕宽度 CSS 像素,比例为 100%。
initial-scale 属性 控制首次加载页面时的缩放级别。
现在,为了使图像在本质上具有响应性,我们应该始终使用 viewport-relative units
,即 %
所以,你应该添加
img {
width: 100%;
height: auto;
}
图片随屏幕大小调整。希望能解开你的疑惑!