前端h5界面适配 vw、vh、rem单位的运用

gyuhao_o

已于 2023-07-24 14:34:46 修改

阅读量1.4k

点赞数

文章标签：前端 javascript html

于 2022-11-29 17:48:46 首次发布

本文链接：https://blog.csdn.net/m0_48571414/article/details/128079512

版权

插曲：js关闭当前页面

适配重点：

如果整体样式按照设计稿等比例缩放（所有元素及间距采用vw为单位）会有问题的话，那就在保证所有元素（图片、文字）都不变形的前提下，自我调整元素间距。

项目配置：

设计稿宽度：750px
IDE软件：Vscode（Visual Studio Code）
px转rem、vw、vh、vmin、vmax单位插件：px to rem & rpx & vw (cssrem) v3.0.2

基础知识：

（1）Viewport（视口宽度）：就是用户当前看到的区域

（2）视口的设置：<meta name=“viewport” content=“width=device-width，initial-scale=1.0，maximum-scale=1.0，user-scalable=0”>，这个属性只对移动端设备起作用，对pc端不起作用

（3）媒体查询：

①max-width/min-width：配置最大、最小宽度范围

@media screen and （max-width ：750px）{ // 样式配置 }

②orientation：配置视口方向

landscape横屏适配（即宽度大于高度）@media screen and （orientation:landscape）{ //样式配置 }

portrait纵向设备（即高度>宽度）@media screen and （orientation:portrait）{ //样式配置 }

单位：

vw：一般将整个视口宽度划分为100份，那么1vw=1/100的视口宽度（如设计稿宽度为750，那么1vw=7.5px），随视口宽度变化；

vh：视口高度（用的较少）；

rem（root em）：一般以屏幕宽度的1/10作为初始html的font-size大小，如设备宽度750px，设置html{ font-size：75px；}，则1rem= 1/10的视口宽度 = 75px）；缺点：需要动态设置根尺寸的font-size；

vmin：视口宽度vw和视口高度vh两者之间最小值，如750px*800px，1vmin = 7.5px；

vmax：视口宽度vw和视口高度vh两者之间最大值，上例1vmax= 8px；

实现：

（设计稿：750px*1314px）

html文档结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">    <!--视口宽度设置-->
    <link rel="stylesheet" href="./css/download.css">  <!--引入css样式-->
    <link rel="stylesheet" href="./css/meida.css" media="screen and (orientation:landscape)"> <!--横屏适配-->
    <title>only vw</title>
</head>
<body>
    <header> 
        <!-- <img class="delete" src="./images/delete.png" alt="图片走丢啦~" onclick="closeBrower()"> -->
        <h1>APP个人中心信息</h1>
    </header>
    <!--遮罩层-->
    <div id="mask" ref="mask" style="z-index: 2;display: none;" onclick="doNothing()">
        <img id="maskimg" src="./images/px2mask.png" alt="图片走丢啦~">
    </div>  
    <div id="download">
        <div>
            <img class="logo" src="./images/logo.jpg" alt="图片走丢啦~">
            <h2>贝小米</h2>
            <h3>做个细节怪</h3>
        </div>
        <div class="download_btn">
            <p>前往个人中心<a href="#" class="open_school">作品集合</a>&nbsp;&nbsp;<a href="#" class="open_parent">数据分析</a></p>
            <div class="im_download"><div class="im_school" onclick="downloadSchool(`https://www.baidu.com`)">写文章</div><div class="im_parent" onclick="downloadParent(`https://www.baidu.com`)">草稿箱</div> </div> 
        </div>
    </div>
    <script type="text/javascript" src="./js/events.js"></script>  <!--引入js文件-->
</body>
</html>

插件配置：