viewport :用户网页的可视区域. width:控制viewport的大小,可以指定一个值,如600,或者特殊的值,如device-width为设备的宽度(单位为缩放100%时的CSS的像素)。 height:和 width 相对应,指定高度。 initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。 maximum-scale:允许用户缩放到的最大比例。 user-scalable:用户是否可以手动缩放。
移动端web页面的开发,由于手机屏幕尺寸、分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问题。
早期网页设计采用静态布局,通过<meta>
标签中的applicable-device
应用设备标识识别移动设备,即<meta name = 'applicable-device' content = 'mobile'>
,在<meta>
标签中的viewport
标签中设置width
,通过js
动态修改标签的initial-scale
使得页面等比缩放,刚好占满整个屏幕。一些文章中有提到静态布局中页面各个元素采用px
为单位,这种方案实现简单,不存在兼容性问题,但用户体验很不友好。
后面出现流式布局,使用百分比%
定义宽度,高度使用px
固定,根据可视区域大小实时进行尺寸调整,通常使用max-width/min-width
控制尺寸范围过大或者过小。这种方案实现比较简单,但在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形,字体大小无法随屏幕大小发生变化。
顺应不同页面字体大小展现问题,出现了弹性布局。这种布局方案下,包裹文字的元素的尺寸采用em/rem
为单位,页面主要划分区域的尺寸依据情况使用px
、百分数或者em/rem
。如一些高校的网站 jlu,页面的主要划分区域使用px
和百分比,包裹文字的元素和文字采用em
。
上面的这几种方案下,页面元素的大小按照屏幕分辨率进行适配调整,但是整体布局不变,对于响应式web设计,网页布局会随着访问它的视口及设备的不同呈现不同的样式,在实现上可能会以上多种方案的结合,同时搭配 媒体查询 技术使用,使得一个页面在多个终端 (PC, mobile, pad) 呈现满意效果,如 mashable 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
background: rgb(244, 236, 236);
}
.page{
height: 90px;
background: white;
width: 800px;
display: flex;
text-align: center;
margin: 0 auto;
border-radius: 10px;
}
p{
margin: 0;
}
.page-1{
flex: 1;
}
.page-2{
flex: 1;
}
.page-3{
flex: 1;
}
.page-4{
flex: 1;
}
.page-5{
flex: 1;
}
</style>
<body>
<div class="page">
<div class="page-1">
<img src="01.png">
<p>景点.玩乐</p>
</div>
<div class="page-2">
<img src="02.png">
<p>周边游</p>
</div>
<div class="page-3">
<img src="03.png">
<p>美食林</p>
</div>
<div class="page-4">
<img src="04.png">
<p>一日游</p>
</div>
<div class="page-5">
<img src="05.png">
<p>当地攻略</p>
</div>
</div>
</body>
</html>