微信公众号:老夫撸代码
关注微信公众号,了解更多各种编码技巧和实战案例
本期内容简介:如何使用vw做手机屏幕适配?
背景
在智能手机横行的时代里,iphone 和 android 几乎瓜分了手机端操作系统的市场。
iphone 还好毕竟只有苹果公司在开发,一家独大但是又不可忽视。
android 系统因为其开源免费,受到国内外各大手机厂商的追捧和青睐,继而在其内核的基础上开发具有自己特色的android衍生系统,比如小米、魅族、华为、vivo等等
手机系统有了,接下来就是硬件的问题,而硬件中又以手机屏幕宣传作为主要吸引用户的手段,进而产生了各种屏幕的手机。
感兴趣的童鞋可以自行去搜索关于手机屏幕分辨率分布情况。
rem 和 viewport 手机适配
有了前面的背景,在我们开发手机页面的时候,势必要关心手机页面呈现在手机屏幕上的效果。
在面对那么多手机屏幕分辨率,一开始设计师内心是崩溃的,总不能根据不同的屏幕设计不同的效果图,即使可以那样做,程序员小哥哥估计也不会答应的。
介于上诉的问题,大家用的最多的是 rem 适配,但是 rem 适配也还是有很多的缺点也处于逐渐淘汰的边缘。
今天我们主要讲的是使用 viewport 来进行手机适配。
viewport的一般用法
首先,我们先看一些知名官网手机适配效果是怎样的?这里我们选择网易官网。
[外链图片转存失败(img-M7VLqaF7-1567993923486)(https://upload-images.jianshu.io/upload_images/5945358-5d2df45ef5ec0e8e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
从上面可以看出网易官网手机适配是很完美的,但是从它的css里面还是可以看到 rem 的影子。
这里老夫使用 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 的宽度,高度根据设计而定
老夫是使用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>
接下来上开发完的效果图:
[外链图片转存失败(img-To7cyC6v-1567993923491)(https://upload-images.jianshu.io/upload_images/5945358-6de01c102877b6fe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
我们可以看到完美适配以上屏幕!
结尾
如果童鞋们在使用过程中,遇到困难,可以直接在公众号留言。
公众号回复 vx手机适配 获取完整代码