前端开发

关于移动端web的布局(一)——百分比布局

2019-06-23  本文已影响79人  Asam_sir

什么是流式布局

里面的内容随着屏幕的大小,从而向两处填充。页面布局的时候都是通过百分比来定义宽度,内容向两处填充

整体就像流动的液体一样。

viewport

简单的理解就是用户网页的可视区域(视口)。它是一个虚拟的区域,用来承载网页。打个比方"一张很大的相片需要放入小型的相框中,相框放不下,所以需要等比缩放照片"而viewport就相当于一个虚拟的区域去缩放照片然后放到浏览器中。

至于viewport更多的知识,暂时不介绍那么多。

移动端上viewport的设置

因为我们知道将PC端上的整个网页放到移动端上的时候,手机不能完全显示,会出现滚动条。所以我们就想怎么样才能让手机完全显示PC端的网页呢?

  1. 网页的宽度必须和浏览器保持一致

  2. 默认显示的缩放比例和PC端保持一致。(不然看不清或者失真)

  3. 不允许用户自行缩放网页。

针对以上提出的方案,我们可以在移动端设置一个meta标签


  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

介绍一下里面的属性

  1. width控制 layout viewport的宽度, "device-width"为当前设备的宽度。
  2. initial-scale: 页面初始缩放的比例。
  3. user-scalable: 是否允许用户缩放。
  4. maximum-scale:允许用户缩放到的最大比例。
  5. 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;

  }

上一篇下一篇

猜你喜欢

热点阅读