2. 科技
    3. 从0带你了解H5适配方案

    从0带你了解H5适配方案

    科技2024-04-04  89

    从0带你了解H5适配方案

    H5

    h5是html5的简称，html5是html的第5个版本，2014年W3C 宣布HTML5正式定稿。致力于web applications的开发与移动端设备的交互

    html5是一个标准，也是一套解决方案，这套解决方案可以利用html+css+js实现更高级的用户体验和开发体验(h5)

    H5(遵守H5标准开发的项目)可以运行在Windows、Mac、iPhone、iPad、Andriod等平台设备上

    通常H5项目，是指移动端网页项目。

    适配的目的

    为了适应各种移动端设备（手机），完美呈现应有的布局效果

    各个移动端设备，分辨率大小不一致，网页想铺满整个屏幕，并在各种分辨下等比缩放

    5种适配方案

    百分比、媒体查询、rem、固定宽度、vw

    百分比
    <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } li{ width: 20%; float: left; } img{ width: 100%; } .container{ width: 100%; overflow: hidden; } .container div{ height: 100px; } .left{ float: left; width: 50%; background: pink; } .right{ float: right; width: 50%; background: orangered; } </style> <body> <ul> <li><img src="category/1.png" alt=""></li> <li><img src="category/2.png" alt=""></li> <li><img src="category/3.png" alt=""></li> <li><img src="category/4.png" alt=""></li> <li><img src="category/5.png" alt=""></li> </ul> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body>

    随着你不断调试这屏幕的大小，div和图片总是能铺满整个屏幕。

    媒体查询

    这里首先讲一下rem的意思：

    rem全称font size of the root element，指相对于根元素字体大小的单位。

    根元素，也就是html的字体大小 比如我们设置为10px

    html{ font-size:10px; } .btn { width: 6rem;//这里width相当于60px height: 3rem; } <style> *{ margin: 0; padding: 0; } html{ /*font-size: 20px;*/ font-size: 100px; } @media only screen and (max-width: 375px){ html{ font-size: 50px; } } @media only screen and (max-width: 360px){ html{ font-size: 48px; } } @media only screen and (max-width: 320px){ html{ font-size: 42.667px; } } .box{ /*根据自身的文字大小 计算的*/ /*width: 1em;*/ /*根据 html根节点的文字大小 动态计算的*/ /*width: 1rem;*/ /* 1rem = 100px ?rem = 693px */ /*width: 6.93rem;*/ width: 7.5rem; height: 2.56rem; background: chocolate; } </style> </head> <body> <div class="box">123</div> </body>
    rem
    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1, user-scalable=no"> <script> remChange() window.addEventListener('resize',remChange) function remChange(){ const html = document.querySelector('html') const width = html.getBoundingClientRect().width // html.style.fontSize = width + 'px' html.style.fontSize = width / 7.5 + 'px' // html.style.fontSize = width / 10 + 'px' // width 代表 设备的宽度 / 7.5 把设备分成7.5等分 } </script> <title>Title</title> <style> *{ margin: 0; padding: 0; } .box{ /* 1rem = 320px ?rem = 693px */ /*width: calc( 693rem / 320 );*/ /*height: calc( 256rem / 320 );*/ /*width: calc( 693rem / 750 );*/ /*height: calc( 256rem / 750 );*/ /*width: 3.75rem; !*375px / (750/7.5);*! height: 2rem;*/ /*width: calc( 375rem / (750/10) ); height: 2.66666rem;*/ width: 3.75rem; height: 1.23rem; font-size: 0.3rem; background: hotpink; } </style> </head> <body> <div class="box"></div> </body> </html>
    固定宽度

    通过设置meta标签的属性从而对设计图750px进行固定缩放

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <script> fixLayout() window.addEventListener('resize',fixLayout) function fixLayout(){ // 动态获取设备的宽度 const width = window.screen.width // 设计图的宽度 const fixWidth = 750 const scale = width / fixWidth const meta = document.createElement('meta') meta.setAttribute('name','viewport') meta.setAttribute('content',`width=${fixWidth}, initial-scale=${scale},maximum-scale=${scale}, user-scalable=no`) document.head.appendChild(meta) console.log(width) } </script> <style> *{ margin: 0; padding: 0; } html{ max-width: 750px; margin: auto; } .box{ width: 750px;//若这里设置位375px，则div的宽度在屏幕为一半 height: 200px; background: #000; } </style> </head> <body> <div class="box"></div> </body> </html>

    效果如下

    vm

    vw的英文缩写为view width vh则为view height 意识是说视图的宽度与视图的高度

    这个视图是只的是游览器当前的窗口的宽高并且 vw 与vh 是为百分比的，没错就是百分比如果写width:50vw 则与width:50% 起到相同的效果，重要的一点是他会随着游览器的改变也会跟着进行改变非常的方便

    *{ margin: 0; } html{ /* 100vw / 7.5 = 13.33333vw 100vw分成 7.5等分 那设计图 750px 750px / 7.5 =100 100px = 1rem */ font-size: 13.33333vw; } .box{ /* viewport width */ /*width: 50vw; height: 50vh;*/ /*width: 7.5rem; !* 1rem = 13.3333vw = 100px *!*/ /*width: 3.75rem;*/ width: 7.5rem; height: 3.75rem; background: #000; } </style> </head> <body> <div class="box"></div> </body> height: 50vh;*/ /*width: 7.5rem; !* 1rem = 13.3333vw = 100px *!*/ /*width: 3.75rem;*/ width: 7.5rem; height: 3.75rem; background: #000; } </style> ```

    Processed: 0.010, SQL: 8