常见的移动布局和屏幕适配解决方案

移动端的布局方式

相关概念

• 响应式布局：响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局

• . 视口：浏览器显示页面内容的屏幕区域，视口分为布局视口、可视视口、理想视口。

• 布局视口：浏览器用来显示页面的最大视口，相当于一张画板

• 视觉视口：用户眼睛能够看到的区域

• 理想视口：对于设备来说，最理想的视口就是，设备尺寸等于布局视口

移动端常见布局方式

• 主流方式：百分比布局(又叫流式布局)、flex弹性布局、vw(vh)、less+rem+媒体查询布局、混合布局
• 非主流方式：媒体查询、bootstrap

百分比布局

• 流式布局，就是百分比布局，也称非固定像素布局。
• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
• 流式布局方式是移动web开发使用的比较常见的布局方式。

flex布局(重点来了！！！)

• 原理：弹性布局，任何一个容器只要设置display:flex都可以变为一个flex容器。容器内的项目主要根据容器内的主轴和交叉轴来进行布局
• 优缺点：操作方便、布局简单、移动端应用广泛；但PC端支持差、低版本IE不支持
• 常见的容器属性：
  • flex-direction：主轴的方向，包括水平和垂直，默认是水平(左——>右)
  • justify-content：项目在主轴上的对齐方式，包括：左对齐、右对齐、居中对其、两端对其等
  • align-items：项目在交叉轴上的对齐方式
• 常见的项目属性：
  • align-self：单个项目在交叉轴上的排列方式，可以覆盖align-items属性(作用于所有项目)
  • flex-grow：剩余可用空间按照多少比例分给该项目。
  • flex-shrink：当容器装不下时，项目缩小时的比例
  • flex-basis：项目在主轴上的初始大小
• 在这里我知识举例了一些最为常见的少部分属性，更多的可以去看看阮一峰的教程，很详细。

移动端屏幕适配方案

• 屏幕适配的公式：手机屏幕的宽 / 设计稿的宽度 = 手机中div的宽 / 设计稿中 div宽度

1. vw/vh：是一个相对长度单位，100vw等于屏幕的宽
2. rem：是一个相对单位，基准是相对于html根元素的字体大小(而em是相对于父元素)
3. CSS3媒体查询