从0带你了解H5适配方案

最新推荐文章于 2024-06-24 15:43:32 发布

拾玥花开

最新推荐文章于 2024-06-24 15:43:32 发布

阅读量501

点赞数

分类专栏： H5 前端文章标签： html css3 html5

本文链接：https://blog.csdn.net/weixin_44691513/article/details/108948994

版权

前端同时被 2 个专栏收录

90 篇文章 8 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

从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>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3RaAsc5u-1602041569454)(E:\凯文的前端博客\框架部分博客\images\1.1.png)]$

随着你不断调试这屏幕的大小，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>

效果如下

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Szl6gxgr-1602041569457)(E:\凯文的前端博客\框架部分博客\images\1.2.png)]$

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>

```

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Y91EZCn-1602041569462)(E:\凯文的前端博客\框架部分博客\images\1.3.png)]$

拾玥花开

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从0带你了解H5适配方案

从0带你了解H5适配方案H5h5是html5的简称，html5是html的第5个版本，2014年W3C 宣布HTML5正式定稿。致力于web applications的开发与移动端设备的交互html5是一个标准，也是一套解决方案，这套解决方案可以利用html+css+js实现更高级的用户体验和开发体验(h5)H5(遵守H5标准开发的项目)可以运行在Windows、Mac、iPhone、iPad、Andriod等平台设备上通常H5项目，是指移动端网页项目。适配的目的为了适应各种移动端设备（手机）
复制链接

扫一扫

专栏目录