@TOC移动端手机适配方案有很多种,常用的有:
-
媒体查询方案:使用CSS3的@media媒体查询,根据设备屏幕大小不同设置不同的CSS样式。例如:
/* 移动端样式 */ @media (max-width: 767px) { body { font-size: 14px; } } /* PC端样式 */ @media (min-width: 768px) { body { font-size: 16px; } }
-
REM方案:根据根元素字体大小设置其他元素大小。例如:
html { font-size: 16px; /* 假设设计稿以宽度375px为基准,字体大小16px为基准 */ } /* 设计稿中某元素宽度为30px */ .example { width: 1.6rem; /* 实际展示宽度为:30 / 16 = 1.875rem */ }
下面是一种基于REM方案的移动端适配代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动端适配</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<style>
html {
font-size: 16px;
}
body {
font-size: 1rem;
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 640px;
margin: 0 auto;
padding: 0 .4rem;
box-sizing: border-box;
}
.box {
width: calc(33.333% - .2rem); /* 等分三列,并留出间距 */
margin-right: .2rem;
margin-bottom: .2rem;
background-color: #f5f5f5;
display: inline-block;
vertical-align: top;
}
.box:last-child {
margin-right: 0;
}
.box img {
width: 100%;
height: auto;
}
.box p {
font-size: .24rem;
color: #666;
margin-top: .1rem;
margin-bottom: 0;
padding: 0 .1rem;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="https://s3.ax1x.com/2021/03/15/6VppXt.jpg">
<p>这是一段描述信息</p>
</div>
<div class="box">
<img src="https://s3.ax1x.com/2021/03/15/6Vq3LU.jpg">
<p>这是另一段描述信息</p>
</div>
<div class="box">
<img src="https://s3.ax1x.com/2021/03/15/6VpsSP.jpg">
<p>这是第三段描述信息,文本过长可能会省略</p>
</div>
</div>
</body>
</html>
该代码中,将根元素字体大小设置为16px,这里以iPhone 6的375宽度为基准。对于其他宽度的设备,自动计算字体大小和元素宽度。使用calc函数和inline-block实现三列等分布局。