viewport适配pc端具体写法 实例
时间: 2023-09-01 17:06:57 浏览: 48
在PC端进行viewport适配,一般需要设置meta标签中的viewport属性。下面是一个具体的写法示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>PC端viewport适配示例</title>
<style>
body {
margin: 0;
padding: 0;
font-size: 14px;
background-color: #f0f0f0;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background-color: #fff;
text-align: center;
padding: 20px;
}
.text {
font-size: 24px;
color: #333;
margin-bottom: 20px;
}
.image {
width: 100%;
max-width: 600px;
height: auto;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="text">PC端viewport适配示例</div>
<img class="image" src="https://via.placeholder.com/600x400.png?text=Image" alt="Image">
</div>
</body>
</html>
```
在meta标签中,设置viewport的宽度为设备的宽度(width=device-width),初始缩放比例为1.0,最大缩放比例为1.0,禁止用户缩放(user-scalable=0)。
在样式中,使用max-width属性限制容器的最大宽度,使得容器随着设备宽度的变化而变化。同时设置图片的最大宽度,使得图片也能随着设备宽度的变化而变化。