在H5中,我们可以使用以下方法来适配PC端和移动端:
1. 使用相对单位:rem、em、vw、vh等
- rem:相对于根元素的字体大小进行计算
- em:相对于父元素的字体大小进行计算
- vw/vh:相对于视口宽度/高度进行计算
通过使用相对单位,可以根据不同设备的屏幕大小自适应调整元素大小。
2. 使用媒体查询
可以使用CSS3的媒体查询来针对不同的设备设置不同的样式。例如,可以根据屏幕宽度设置不同的字体大小、行高等。
@media screen and (max-width: 768px) {
/* 在屏幕宽度小于等于768px时生效 */
body {
font-size: 14px;
line-height: 1.5;
}
}
3. 使用框架或工具库
可以使用一些流行的框架或工具库来快速实现响应式布局,如Bootstrap、Foundation、Ant Design等。
总之,在H5中,我们需要考虑到不同设备的屏幕大小和分辨率,使用相对单位、媒体查询和框架等方法来实现响应式布局,以适配PC端和移动端。