h5移动端适配（html+css+vw）

恩神

已于 2022-10-12 21:44:37 修改

阅读量374

点赞数

分类专栏： java script 文章标签： html css 前端

于 2022-10-10 10:27:48 首次发布

本文链接：https://blog.csdn.net/essnbb/article/details/127239914

版权

本文介绍了如何使用HTML、CSS和vw单位进行H5移动端的屏幕适配，通过vw单位实现响应式布局，确保页面在不同设备上展示效果良好。内容涵盖vw单位的原理、使用方法及实战技巧，帮助前端开发者优化移动用户体验。

摘要由CSDN通过智能技术生成


<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>h5移动页面</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 100vw;
			height: 341.867vw;
			position: relative;
			background: url(./imgs/长图_第二版@3x.png) no-repeat;
			background-size: 100%;
		}

		.rights {
			color: white;
			text-align: center;
			line-height: 6.000vw;
			width: 17.867vw;
			height: 6.000vw;
			background: url(./imgs/圆角矩形\ 1@3x.png) no-repeat;
			background-size: 100%;
			position: absolute;
			right: 4.667vw;
			top: 7.467vw;
			font-size: 12px;
		}

		.vd {
			width: 95.067vw;
			height: 487px;
			overflow-y: hidden;
			overflow-x: auto;
			white-space: nowrap;
			position: absolute;
			top: 196.533vw;