html手机自适应代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Style the body */
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
/* Header/Logo Title */
.header {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
}
/* Page Content */
.content {padding:20px;}
/* Responsive Columns /
.row {
display: -ms-flexbox; / IE10 /
display: flex;
-ms-flex-wrap: wrap; / IE10 */
flex-wrap: wrap;
}
.col {
-ms-flex:50%; /* IE10 */
flex: 50%;
padding: 0 4px;
}
/* Create two equal columns that sits next to each other */
.col {
float: left;
width: 50%;
padding: 0 10px;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive Images */
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<!-- Header -->
<div class="header">
<h1>My Website</h1>
<p>A website created by me.</p>
</div>
<!-- Page Content -->
<div class="content">
<h2>Responsive Columns</h2>
<p>In this example, we have created two equal columns that sits next to each other. They will stack on top of each other when the screen size is less than 600px wide.</p>
<div class="row">
<div class="col">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non feugiat lacus. Nullam condimentum, sapien quis bibendum bibendum, enim nisi aliquet mauris, nec lacinia nibh elit vel mauris. Sed euismod, nisl vel tincidunt dapibus, quam libero bibendum elit, euismod bibendum ipsum velit vel odio. </p>
</div>
<div class="col">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non feugiat lacus. Nullam condimentum, sapien quis bibendum bibendum, enim nisi aliquet mauris, nec lacinia nibh elit vel mauris. Sed euismod, nisl vel tincidunt dapibus, quam libero bibendum elit, euismod bibendum ipsum velit vel odio. </p>
</div>
</div>
<h2>Responsive Images</h2>
<p>In this example, we have created a responsive image that will adjust its size based on the screen size.</p>
<img src="https://www.w3schools.com/w3images/fjords.jpg" alt="Fjords" style="width:100%;">
</div>
</body>
</html>
以上代码是一个基本的HTML页面，其中包含了一些CSS样式，用于实现页面的自适应效果。具体来说，以下是实现自适应的关键代码：
在<head>标签中添加<meta>标签，用于设置页面的viewport，即视口大小和缩放比例：
<meta name="viewport" content="width=device-width, initial-scale=1">
其中，width=device-width表示视口宽度等于设备宽度，initial-scale=1表示初始缩放比例为1。
使用CSS的@media查询，根据不同的屏幕尺寸设置不同的样式。例如，以下代码表示在屏幕宽度小于600px时，将两个列设置为垂直排列：
@media screen and (max-width: 600px) {
.col {
width: 100%;
}
}
使用CSS的相对单位，如%、em、rem等，而不是固定的像素值。这样可以根据屏幕尺寸自动调整元素的大小。
例如，以下代码中的img元素使用了max-width: 100%样式，表示图片的最大宽度为100%，即根据屏幕尺寸自动调整图片大小。
img {
max-width: 100%;
height: auto;
}
以上代码实现了一个基本的HTML页面，并使用了一些CSS样式实现了页面的自适应效果。
