移动端布局

 

移动端布局和PC端有所区别:

1) 单独制作移动端页面(主流)

  • 流式布局(百分比布局)
  • flex弹性布局(推荐)
  • less+rem+媒体查询布局
  • 混合布局

2) 响应式页面兼容移动端

  • 媒体查询
  • bootstrap

移动端布局需要了解几个概念:

1. meta视口标签

<!-- 视口的设置:device-width表示视口的宽度和所用设备保持一致,默认的缩放比例和PC端一致,user-scalable=no表示用户不能自行缩放 -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimun-scale=1.0">
 属性 解释说明
 width 宽度设置的是viewport宽度,可以设置device-width特殊值
initial-scale
初始缩放比,大于0的数字
maximum-scale
最大缩放比,大于0的数字
minimun-scale
最小缩放比,大于0的数字
user-scalable
用户是否可以缩放,yes或no(1或0)

标准的viewport设置:

  • 视口宽度和设备保持一致:content="width=device-width
  • 视口的默认缩放比例为1.0:initial-scale=1.0
  • 不允许用户自行缩放:user-scalable=no
  • 最大允许的缩放比例为1.0:maximum-scale=1.0
  • 最小允许的缩放比例为1.0:minimun-scale=1.0

 

2. 物理像素&物理像素比:

  • 物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了的,比如苹果6/7/8 是750*1334
  • 但是在开发的时候1px不是一定等于1个物理像素的
  • PC端页面,1个px等于1个物理像素点,但是移动端就不尽相同
  • 一个px的能显示的物理像素点的个数称为物理像素比或屏幕像素比

移动端布局

 

3. 二倍图:

由于在移动设备上,物理像素比并不是1:1的,因此图片如果像在PC端那样直接使用的话就会出问题

1) 假设我们需要一个50*50像素(css像素)的图片,直接放到iPhone8设备上,里面会放大2倍,变为100*100,图片就会变得模糊

2) 正确的做法是,放一个100*100的图片,然后手动把这个图片缩小为50*50像素(css像素)

3) 因此在移动布局中,我们准备的图片要比实际需要的图片大小大2倍。这种方式就是二倍图

 

4. CSS3盒子模型:box-sizing

  • 传统模式宽度计算:盒子的宽度 = CSS中设置的width + border + padding
  • CSS盒子模型:盒子的宽度 = CSS中设置的宽度width里面包含了border和padding

也就是说,在CSS的盒子模型中,padding和border不会撑大盒子

/* CSS3盒子模型 */
box-sizing: border-box;
/* 传统盒子模型 */
box-sizing: content-box;

移动端可以全部使用CSS3模型,PC端如果完全需要兼容,就需要用传统的盒子模式,如果不考虑兼容性,就可以选择CSS3模型。

 

了解了这些概念之后,接下来介绍的事移动端的四个布局方式:

  • 移动布局之流式布局
  • 移动布局之弹性布局
  • 移动布局之rem
  • 移动布局之响应式布局

移动端布局

上一篇:mybatis-plus-generator: 自动生成entity,mapper,service,controller的代码


下一篇:移动布局之流式布局