一分钟学会H5手机适配

2024-03-18 19:54:46

微信公众号：老夫撸代码
关注微信公众号，了解更多各种编码技巧和实战案例
本期内容简介：如何使用vw做手机屏幕适配?

背景

在智能手机横行的时代里，iphone 和 android 几乎瓜分了手机端操作系统的市场。

iphone 还好毕竟只有苹果公司在开发，一家独大但是又不可忽视。

android 系统因为其开源免费，受到国内外各大手机厂商的追捧和青睐，继而在其内核的基础上开发具有自己特色的android衍生系统，比如小米、魅族、华为、vivo等等

手机系统有了，接下来就是硬件的问题，而硬件中又以手机屏幕宣传作为主要吸引用户的手段，进而产生了各种屏幕的手机。

感兴趣的童鞋可以自行去搜索关于手机屏幕分辨率分布情况。

rem 和 viewport 手机适配

有了前面的背景，在我们开发手机页面的时候，势必要关心手机页面呈现在手机屏幕上的效果。
在面对那么多手机屏幕分辨率，一开始设计师内心是崩溃的，总不能根据不同的屏幕设计不同的效果图，即使可以那样做，程序员小哥哥估计也不会答应的。

介于上诉的问题，大家用的最多的是 rem 适配，但是 rem 适配也还是有很多的缺点也处于逐渐淘汰的边缘。

今天我们主要讲的是使用 viewport 来进行手机适配。

viewport的一般用法

首先，我们先看一些知名官网手机适配效果是怎样的？这里我们选择网易官网。
一分钟学会H5手机适配

一分钟学会H5手机适配

一分钟学会H5手机适配

一分钟学会H5手机适配

[外链图片转存失败(img-M7VLqaF7-1567993923486)(https://upload-images.jianshu.io/upload_images/5945358-5d2df45ef5ec0e8e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

从上面可以看出网易官网手机适配是很完美的，但是从它的css里面还是可以看到 rem 的影子。

一分钟学会H5手机适配

这里老夫使用 viewport 完全复制网易官网并且达到适配效果。

什么是 viewport?

viewport 是用户网页的可视区域，不包括滚动条。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  • width=device-width ：表示宽度是设备屏幕的宽度
  • initial-scale=1.0：表示初始的缩放比例
  • minimum-scale=0.5：表示最小的缩放比例
  • maximum-scale=2.0：表示最大的缩放比例
  • user-scalable=yes：表示用户是否可以调整缩放比例

上面内容建议大家死记。

用法

在html页面的头部引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易页面</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
</body>
</html>

实战：仿网易页面

首先将网易页面调整到 750px 的宽度，一般设计师的设计稿是 750px 的宽度，高度根据设计而定

一分钟学会H5手机适配

老夫是使用sass来编写css，先上css代码，可以看到整个css里面都是用vw来指定高度和宽度的。

main.css

body {
    width: 100vw;
    background: #f8f8f8;
}

.container .topbar {
    background-color: #ee1a1a;
    height: 11.4666666667vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-left: 2.6666666667vw;
    padding-right: 2.6666666667vw;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.container .topbar .t1 img {
    height: 6.4vw;
    width: 6.4vw;
}

.container .topbar .t2 img {
    width: 11.2vw;
    height: 5.3333333333vw;
}

.container .topbar .t3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.container .topbar .t3 img {
    width: 4.5333333333vw;
    height: 3.4666666667vw;
    margin-right: 0.6666666667vw;
}

.container .topbar .t3 span {
    color: #fff;
    font-size: 3.7333333333vw;
}

.container .channel {
    height: 12.4vw;
    background-color: #fff;
}

.container .channel ul {
    height: 12.4vw;
    margin: 0;
    list-style: none;
    padding-left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.container .channel ul li {
    display: inline-block;
    line-height: 12.4vw;
    width: 32.4444444444vw;
    text-align: center;
    position: relative;
    font-size: 4.5333333333vw;
}

.container .channel ul .active {
    color: #ee1a1a;
}

.container .channel ul .active::after {
    position: absolute;
    left: 42%;
    bottom: 0px;
    content: " ";
    background: #ee1a1a;
    display: block;
    width: 4vw;
    height: 0.5333333333vw;
}

.container .channel-1 ul {
    width: 100vw;
    min-height: 23.4666666667vw;
    list-style: none;
    padding: 2.9333333333vw;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.container .channel-1 ul li {
    display: inline-block;
    width: 15.6888888889vw;
    height: 9.3306666667vw;
}

.container .channel-1 ul li a {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
    color: #333;
    text-align: center;
    line-height: 9.3306666667vw;
    font-size: 4.2666666667vw;
}

.container .content {
    min-height: 100vh;
    background-color: #fff;
    padding-top: 4vw;
}

.container .content > h2 {
    margin-top: 0;
    padding-left: 4vw;
    font-size: 4.8vw;
}

.container .content article {
    padding-top: 2.6666666667vw;
    padding-left: 4vw;
    padding-right: 4vw;
    padding-bottom: 2.6666666667vw;
    border-bottom: 1px solid #f5f7f9;
}

.container .content article img {
    float: right;
}

.container .content article h2 {
    margin-top: 0;
    margin-bottom: 1.3333333333vw;
    color: #333;
    font-weight: 400;
    font-size: 4vw;
}

.container .content article p {
    margin-top: 0;
    margin-bottom: 0;
    color: #b4b4b4;
    font-size: 3.2vw;
}

.container .content article .warp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.container .content article .warp a {
    text-decoration: none;
}

.container .content article .warp img {
    width: 31.196vw;
    height: 19.464vw;
}

.container .content article .ad {
    display: block;
    overflow: hidden;
}

.container .content article .ad h3 {
    font-size: 4.5333333333vw;
    font-weight: 400;
    color: #333;
}

.container .content article .ad img {
    width: 100%;
    height: 46.9333333333vw;
}

.container .content .item1 {
    height: 500px;
}

上述css是通过sass来编译的，里面使用到一个px转vw的函数

@function vw($px) {
  @return ($px / 750) * 100vw;
}
##用法
 .t2{
      img{
        width: vw(84);
        height: vw(40);
      }
    }

大家只需要把设计稿中的像素 px 作为参数即可。
下面是页面的代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易页面</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div class="container">
    <div class="topbar">
        <div class="t1">
            <img src="images/user.png">
        </div>
        <div class="t2">
            <img src="images/logo.png">
        </div>
        <div class="t3">
            <img src="images/email.png"><span>邮箱</span>
        </div>
    </div>
    <div class="channel">
        <ul>
            <li class="active">要闻</li>
            <li>推荐</li>
            <li>原创</li>
        </ul>
    </div>
    <div class="channel-1">
        <ul class="wap-linklist">
            <li class="link-item"><a href="">新闻</a>
            </li>
            <li class="link-item"><a href="">娱乐</a>
            </li>
            <li class="link-item"><a href="">体育</a>
            </li>
            <li class="link-item"><a href="">财经</a>
            </li>
            <li class="link-item"><a href="">图片</a>
            </li>
            <li class="link-item"><a href="">汽车</a>
            </li>
            <li class="link-item"><a href="">星闻</a>
            </li>
            <li class="link-item"><a href="">军事</a>
            </li>
            <li class="link-item"><a
                    href="">直播</a></li>
            <li class="link-item"><a href="">视频</a>
            </li>
            <li class="link-item"><a href="">科技</a>
            </li>
           </ul>
    </div>
    <div class="content">
        <h2>今日要闻</h2>
        <article class="item">
            <h2>*会见德国总理</h2>
            <p>央视网 13小时前 1658跟帖</p>
        </article>
        <article class="item">
            <h2>独家视频丨*：面对困难不能独善其身</h2>
            <p>央视网 2小时前 187跟帖</p>
        </article>
        <article class="item">
            <div class="warp">
                <a href="">
                    <h2>仅仅24小时！*巡视后 省部级老虎被“秒杀”</h2>
                    <p>长安街知事 10小时前 204跟贴</p>
                </a>
                <img src="images/img1.png">
            </div>
        </article>
        <article class="item1">
            <div class="ad">
                <h3>限时8折！大牌美妆狂欢购！千万别错过！</h3>
                <img src="images/img2.jpg">
            </div>
        </article>
    </div>
</div>
</body>
</html>

接下来上开发完的效果图：
一分钟学会H5手机适配

一分钟学会H5手机适配

[外链图片转存失败(img-To7cyC6v-1567993923491)(https://upload-images.jianshu.io/upload_images/5945358-6de01c102877b6fe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

一分钟学会H5手机适配

一分钟学会H5手机适配

一分钟学会H5手机适配

我们可以看到完美适配以上屏幕!

结尾

如果童鞋们在使用过程中，遇到困难，可以直接在公众号留言。
公众号回复 vx手机适配 获取完整代码
一分钟学会H5手机适配

上一篇：rem+vw前端自适应


下一篇：用CSS3 vh 简单实现DIV全屏居中