移动端布局

移动端是什么？

学习移动端布局，首先，我们需要知道什么是移动端，在前端开发里，一般来说，移动端就是手机和平板电脑。

移动端的现状

随着时代的发展，手机的品牌越来越多，每个品牌的型号也各不相同，也就导致了我们在开发时不能像pc端一样直接使用像素来布局，移动端的屏幕大小不同意味着我们使用常规布局在每个移动端打开都会不一样，所以常规流布局就不满足我们的需求了

移动端布局

现阶段的移动端布局方式：
流式布局（百分比布局）
flex 弹性布局
less+rem+媒体查询布局
混合布局
响应式布局：配合媒体查询

在写的移动端布局的时候，盒子模型的使用也是要注意的，尽量使用css3盒模型来布局，因为常规流的盒模型的宽高并不会计算边框，而边框是默认是1px，无论在哪个移动端它也会是1px，会直接影响到布局。

视口

布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解PC端页面在手机上显示的问题。
iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

视觉视口 visual viewport

视觉视口说白了就是我们能看到网站的区域
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口，对设备来讲，是最理想的视口尺寸
需要手动添写meta视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

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

只要将html头部的meta标签内容改为上面这样，就可以了。

移动端难点

1.精灵图
因为移动端的尺寸比较小，我们正常的精灵图在直接插入时会看起来很模糊，这个时候就需要使用二倍图，正常来说我们使用的1px就是1个物理像素，但是在移动端的时候我们需要在1px中装入多个物理像素，这样才能保证图片不模糊，也能使图片缩放之后任然能够保证清晰度。
2.开发方案的选择
一般主流方案就是将pc端和移动端的样式分开，也就是说，PC端和移动端为两套网站，pc端是pc端的样式，移动端在写一套，专门针对移动端适配的一套网站
但是我们也可以利用媒体查询来进行响应式布局，也就是说pc端和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配。

总结

移动端的布局其实并不难，只要注意在布局时一定是使用百分比或者相对单位来做布局，让里面的元素能够随着页面大小的缩放整体缩放，不能出现一缩放界面就混乱的情况。