关于移动端web的布局(一)——百分比布局
2019-06-23 本文已影响79人
Asam_sir
什么是流式布局
里面的内容随着屏幕的大小,从而向两处填充。页面布局的时候都是通过百分比来定义宽度,内容向两处填充
整体就像流动的液体一样。
viewport
简单的理解就是用户网页的可视区域(视口)。它是一个虚拟的区域,用来承载网页。打个比方"一张很大的相片需要放入小型的相框中,相框放不下,所以需要等比缩放照片"而viewport就相当于一个虚拟的区域去缩放照片然后放到浏览器中。
至于viewport更多的知识,暂时不介绍那么多。
移动端上viewport的设置
因为我们知道将PC端上的整个网页放到移动端上的时候,手机不能完全显示,会出现滚动条。所以我们就想怎么样才能让手机完全显示PC端的网页呢?
-
网页的宽度必须和浏览器保持一致
-
默认显示的缩放比例和PC端保持一致。(不然看不清或者失真)
-
不允许用户自行缩放网页。
针对以上提出的方案,我们可以在移动端设置一个meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
介绍一下里面的属性
- width控制 layout viewport的宽度, "device-width"为当前设备的宽度。
- initial-scale: 页面初始缩放的比例。
- user-scalable: 是否允许用户缩放。
- maximum-scale:允许用户缩放到的最大比例。
- minimum-scale:允许用户缩放到的最小比例。
当设置完meta标签后,也满足了我们提出的解决方案,那么现在我们手机浏览网页的显示和PC端一样了。
注意点
如果在移动端使用百分比布局的话,那么最好将box-sizing设置为border-box(最好去看一下css中的盒模型),否则盒子的宽度不好计算。
盒子:
border: 1px solid #ccc;
width: 100%;
因为默认是标准盒子,所以计算盒子实际宽度是: 100%+padding+border, 无法准确的计算盒子宽度。
在使用精灵图的时候,需要把图片缩小为原来的两倍才能完美显示,不失真(以iPhone 6为基准)。
使用float的时候要记住清除浮动,这要才能保证父元素的高度不会塌陷
.clearFix::after, */\*清除浮动\*/*
.clearFix::before{
content: "";
display: block;
visibility: hidden;
height: 0;
line-height: 0;
clear: both;
}