Viewport视口
在移动端viewport视口就是浏览器显示页面内容的屏幕区域。在viewport中有两种视口,分别表示为, visual viewport(可视视口)和layout viewport(布局视口)。
visual viewport 固定大小跟屏幕大小相同,在上面,而layout viewport 可改变大小,在下面。Layout viewport默认大小为980像素,可通过document.documentElement.clientWidth获取。
现代网页需要将layout viewport设置成跟visual viewport等同大小,方便进行网页制作。
Viewport设置
通过
<meta>
标签进行设置,name属性指定viewport值,content属性进行视口配置。
取值 | 含义 |
---|---|
width | 设置layout viewport的宽度特定值,device-width表示设备宽。 |
height | 设置layout viewport 的高度特定值,一般不进行设置。 |
initial-scale | 设置页面初始缩放。 |
minimun-scale | 设置页面最小缩放 |
maximum-scale | 设置页面最大缩放 |
user-scalable | 设置页面能否进行缩放 |
移动端适配方案
- 百分比布局,也叫流式布局。代表网站:优酷、百度、天猫、腾讯。
- 等比缩放布局,也叫rem布局。代表网站:网易、爱奇艺、淘宝、美图。
流式布局原则
好处:大屏幕下显示更多的内容。
坏处:宽屏下比例会有一些不协调
案例:仿拉勾网
<!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="./iconfont/iconfont.css">
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #555555;
}
img {
display: block;
}
header {
height: 45px;
line-height: 45px;
color: white;
font-size: 20px;
text-align: center;
background-color: #00b38a;
}
.login {
/* 弹性布局 */
display: flex;
/*子元素两端对齐 */
justify-content: space-between;
/* 子元素垂直居中 */
align-items: center;
height: 43px;
font-size: 14px;
}
.login p {
margin-left: 16px;
}
.login div {
width: 84px;
height: 30px;
background-color: #f5f5f5;
margin-right: 15px;
border-radius: 15px;
text-align: center;
line-height: 30px;
}
.login div a {
height: 100%;
width: 100%;
}
.list li {
display: flex;
/* 子元素垂直方向居中 */
align-items: center;
height: 90px;
border-top: 1px solid #e8e8e8;
}
.list .list_img {
width: 60px;
height: 60px;
margin: 0 10px 0 14px;
}
.list .list_img img {
width: 100%;
}
.list .list_info {
flex: 1;
}
.list .list_info h2 {
font-size: 18px;
}
.list .list_info p:first-of-type {
display: flex;
/* 两端对齐 */
justify-content: space-between;
font-size: 14px;
margin-top: 4px;
}
.list .list_info p:first-of-type span:last-of-type {
margin-right: 14px;
color: #17b994;
}
.list .list_info p:last-of-type {
font-size: 12px;
color: #888888;
margin-top: 8px;
}
.more {
height: 50px;
background-color: #fafafa;
line-height: 50px;
border: 1px solid #e8e8e8;
text-align: center;
}
a.more {
display: block;
width: 100%;
height: 100%;
}
footer {
height: 115px;
text-align: center;
font-size: 12px;
line-height: 22px;
padding-top: 27px;
box-sizing: border-box;
margin-bottom: 45px;
}
.tabbar {
width: 100%;
height: 45px;
border-top: 1px #e8e8e8 solid;
display: flex;
/* 固定定位 */
position: fixed;
bottom: 0;
background: #f6f6f6;
font-size: 18px;
color: #c2cfcc;
}
.tabbar i {
font-size: 22px;
position: relative;
top: 2px;
}
.tabbar div {
flex: 1;
text-align: center;
line-height: 45px;
}
.tabbar .active {
background: #e7f3f0;
color: #00b38a;
}
</style>
<body>
<header>拉勾网</header>
<section>
<div class="login">
<p>10秒定制职位</p>
<div><a href="#">去登录</a></div>
</div>
</section>
<ul class="list">
<li>
<div class="list_img">
<a href="#"><img src="images/lagou1.jpg" alt=""></a>
</div>
<div class="list_info">
<h2><a href="#">正大爱特</a></h2>
<p>
<span>中级java开发工程师</span>
<span>13-20k</span>
</p>
<p>今天:11:16</p>
</div>
</li>
<li>
<div class="list_img">
<a href="#"><img src="images/lagou1.jpg" alt=""></a>
</div>
<div class="list_info">
<h2><a href="#">正大爱特</a></h2>
<p>
<span>中级java开发工程师</span>
<span>13-20k</span>
</p>
<p>今天:11:16</p>
</div>
</li>
<li>
<div class="list_img">
<a href="#"><img src="images/lagou1.jpg" alt=""></a>
</div>
<div class="list_info">
<h2><a href="#">正大爱特</a></h2>
<p>
<span>中级java开发工程师</span>
<span>13-20k</span>
</p>
<p>今天:11:16</p>
</div>
</li>
<li>
<div class="list_img">
<a href="#"><img src="images/lagou1.jpg" alt=""></a>
</div>
<div class="list_info">
<h2><a href="#">正大爱特</a></h2>
<p>
<span>中级java开发工程师</span>
<span>13-20k</span>
</p>
<p>今天:11:16</p>
</div>
</li>
<li>
<div class="list_img">
<a href="#"><img src="images/lagou1.jpg" alt=""></a>
</div>
<div class="list_info">
<h2><a href="#">正大爱特</a></h2>
<p>
<span>中级java开发工程师</span>
<span>13-20k</span>
</p>
<p>今天:11:16</p>
</div>
</li>
<li>
<div class="list_img">
<a href="#"><img src="images/lagou1.jpg" alt=""></a>
</div>
<div class="list_info">
<h2><a href="#">正大爱特</a></h2>
<p>
<span>中级java开发工程师</span>
<span>13-20k</span>
</p>
<p>今天:11:16</p>
</div>
</li>
<li>
<div class="list_img">
<a href="#"><img src="images/lagou1.jpg" alt=""></a>
</div>
<div class="list_info">
<h2><a href="#">正大爱特</a></h2>
<p>
<span>中级java开发工程师</span>
<span>13-20k</span>
</p>
<p>今天:11:16</p>
</div>
</li>
</ul>
<section>
<a href="#" class="more">加载更多</a>
</section>
<footer>
<p>@2015 lagou.com,all right reserved</p>
<p>
<a href="#">移动版</a>
<a href="#">移动版</a>
<a href="#">移动版</a>
</p>
</footer>
<section class="tabbar">
<div class="active"><i class="iconfont icon-home"></i> 职位</div>
<div><i class="iconfont icon-sousuo-"></i> 搜索</div>
<div><i class="iconfont icon-wode"></i> 我的</div>
</section>
</body>
</html>
rem布局
- 单位:
- em:是一个相对单位,1em等于当前元素或父元素的font-size值。
- rem:是一个相对单位,1rem等于根元素(html)的font-size值。
- vw/vh:把屏幕分成100份,1vw等于屏幕宽的1%.
- 动态设置font-size:
- 通过 JS
- 通过vw
注:要给body重置一下font-size:16px;
js动态设置font-size:
layout viewport : document.documentElement.clientWidth
iphone 6 : 375
iphone 6 plus : 414
iphone 6 : document.documentElement.clientWidth / 3.75 -> 100 65
iphone 6 plus : document.documentElement.clientWidth / 3.75 -> 110.4
var fontsize = document.documentElement.clientWidth / 3.75;
document.documentElement.style.fontSize = fontsize + 'px'
vw动态设置font-size:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
font-size: 26.66667vw;
}
</style>
</head>
<body>
vw:把屏幕分成100份,屏幕宽等于100vw
iphone 375 1vw->3.75
iphone plus 414 1vw->4.14
如果在iphone 下等于100px,应该设置多少个vw?
100/3.75=26.66667个
</body>
</html>
rem按正常布局就行,可以通过vscode安装插件px to rem,选中有px单位的元素,然后alt+z就会转换成rem单位
注意修改插件拓展中的值
eg:
<!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="./iconfont/iconfont.css">
<style>
html {
font-size: 26.666667vw;
}
body {
font-size: 16px;
}
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #555555;
}
img {
display: block;
}
header {
height: 0.45rem;
line-height: 0.45rem;
color: white;
font-size: 0.2rem;
text-align: center;
background-color: #00b38a;
}
.login {
/* 弹性布局 */
display: flex;
/*子元素两端对齐 */
justify-content: space-between;
/* 子元素垂直居中 */
align-items: center;
height: 0.43rem;
font-size: 0.14rem;
}
.login p {
margin-left: 0.16rem;
}
.login div {
width: 0.84rem;
height: 0.3rem;
background-color: #f5f5f5;
margin-right: 0.15rem;
border-radius: 0.15rem;
text-align: center;
line-height: 0.3rem;
}
.login div a {
height: 100%;
width: 100%;
}
.list li {
display: flex;
/* 子元素垂直方向居中 */
align-items: center;
height: 0.9rem;
border-top: 0.01rem solid #e8e8e8;
}
.list .list_img {
width: 0.6rem;
height: 0.6rem;
margin: 0 0.1rem 0 0.14rem;
}
.list .list_img img {
width: 100%;
}
.list .list_info {
flex: 1;
}
.list .list_info h2 {
font-size: 0.18rem;
}
.list .list_info p:first-of-type {
display: flex;
/* 两端对齐 */
justify-content: space-between;
font-size: 0.14rem;
margin-top: 0.04rem;
}
.list .list_info p:first-of-type span:last-of-type {
margin-right: 0.14rem;
color: #17b994;
}
.list .list_info p:last-of-type {
font-size: 0.12rem;
color: #888888;
margin-top: 0.08rem;
}
.more {
height: 0.5rem;
background-color: #fafafa;
line-height: 0.5rem;
border: 0.01rem solid #e8e8e8;
text-align: center;
}
a.more {
display: block;
width: 100%;
height: 100%;
}
footer {
height: 1.15rem;
text-align: center;
font-size: 0.12rem;
line-height: 0.22rem;
padding-top: 0.27rem;
box-sizing: border-box;
margin-bottom: 0.45rem;
}
.tabbar {
width: 100%;
height: 0.45rem;
border-top: 0.01rem #e8e8e8 solid;
display: flex;
/* 固定定位 */
position: fixed;
bottom: 0;
background: #f6f6f6;
font-size: 0.18rem;
color: #c2cfcc;
}
.tabbar i {
font-size: 0.22rem;
position: relative;
top: 0.02rem;
}
.tabbar div {
flex: 1;
text-align: center;
line-height: 0.45rem;
}
.tabbar .active {
background: #e7f3f0;
color: #00b38a;
}
</style>
<body>
<header>拉勾网</header>
<section>
<div class="login">
<p>10秒定制职位</p>
<div><a href="#">去登录</a></div>
</div>
</section>
<ul class="list">
<li>
<div class="list_img">
<a href="#"><img src="images/lagou1.jpg" alt=""></a>
</div>
<div class="list_info">
<h2><a href="#">正大爱特</a></h2>
<p>
<span>中级java开发工程师</span>
<span>13-20k</span>
</p>
<p>今天:11:16</p>
</div>
</li>
<li>
<div class="list_img">
<a href="#"><img src="images/lagou1.jpg" alt=""></a>
</div>
<div class="list_info">
<h2><a href="#">正大爱特</a></h2>
<p>
<span>中级java开发工程师</span>
<span>13-20k</span>
</p>
<p>今天:11:16</p>
</div>
</li>
<li>
<div class="list_img">
<a href="#"><img src="images/lagou1.jpg" alt=""></a>
</div>
<div class="list_info">
<h2><a href="#">正大爱特</a></h2>
<p>
<span>中级java开发工程师</span>
<span>13-20k</span>
</p>
<p>今天:11:16</p>
</div>
</li>
<li>
<div class="list_img">
<a href="#"><img src="images/lagou1.jpg" alt=""></a>
</div>
<div class="list_info">
<h2><a href="#">正大爱特</a></h2>
<p>
<span>中级java开发工程师</span>
<span>13-20k</span>
</p>
<p>今天:11:16</p>
</div>
</li>
<li>
<div class="list_img">
<a href="#"><img src="images/lagou1.jpg" alt=""></a>
</div>
<div class="list_info">
<h2><a href="#">正大爱特</a></h2>
<p>
<span>中级java开发工程师</span>
<span>13-20k</span>
</p>
<p>今天:11:16</p>
</div>
</li>
<li>
<div class="list_img">
<a href="#"><img src="images/lagou1.jpg" alt=""></a>
</div>
<div class="list_info">
<h2><a href="#">正大爱特</a></h2>
<p>
<span>中级java开发工程师</span>
<span>13-20k</span>
</p>
<p>今天:11:16</p>
</div>
</li>
<li>
<div class="list_img">
<a href="#"><img src="images/lagou1.jpg" alt=""></a>
</div>
<div class="list_info">
<h2><a href="#">正大爱特</a></h2>
<p>
<span>中级java开发工程师</span>
<span>13-20k</span>
</p>
<p>今天:11:16</p>
</div>
</li>
<li>
<div class="list_img">
<a href="#"><img src="images/lagou1.jpg" alt=""></a>
</div>
<div class="list_info">
<h2><a href="#">正大爱特</a></h2>
<p>
<span>中级java开发工程师</span>
<span>13-20k</span>
</p>
<p>今天:11:16</p>
</div>
</li>
<li>
<div class="list_img">
<a href="#"><img src="images/lagou1.jpg" alt=""></a>
</div>
<div class="list_info">
<h2><a href="#">正大爱特</a></h2>
<p>
<span>中级java开发工程师</span>
<span>13-20k</span>
</p>
<p>今天:11:16</p>
</div>
</li>
</ul>
<section>
<a href="#" class="more">加载更多</a>
</section>
<footer>
<p>@2015 lagou.com,all right reserved</p>
<p>
<a href="#">移动版</a>
<a href="#">移动版</a>
<a href="#">移动版</a>
</p>
</footer>
<section class="tabbar">
<div class="active"><i class="iconfont icon-home"></i> 职位</div>
<div><i class="iconfont icon-sousuo-"></i> 搜索</div>
<div><i class="iconfont icon-wode"></i> 我的</div>
</section>
</body>
</html>