写在开篇前——移动端基础
众所周知，pc端呢目前处于一种三家分晋，即三种内核(webkit，blink，gecko)，当然算上马上要更换内核的IE那就是四个。而我们的移动端呢，那就是万余基于webkit了，所以各位进行移动端web开发时，只考虑webkit的适配就可以了，怎么样，开不开心 ？
我们先来看看什么是视口，视口就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口，他又可以分成一下四种
0.1布局视口 layout viewport
一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
布局视口(图片来自网络)
0.2视觉视口 visual viewport
字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
视觉视口(图片来自网络)
0.3理想视口 ideal viewport(推荐用这个)
为了使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口，对设备来讲，是最理想的视口尺寸
需要手动添写meta视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽
mate标签(来自网络)
最标准的viewport设置
视口宽度和设备保持一致
视口的默认缩放比例1.0
不允许用户自行缩放
最大允许的缩放比例1.0
最小允许的缩放比例1.0
ps：注意二倍图或者三倍图问题
1.流式布局(百分比布局)
流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
2.flex布局(推荐布局方式)
父盒子开启display：flex后，默认为不换行，所以使用flex-wrap：wrap；使其换行
使用justify-content: space-around; 使其子盒子主轴间距平均分配
使用align-content: space-around; 使其子盒子侧轴间距平均分配
3.rem布局
方案1
①假设设计稿是750px
②假设我们把整个屏幕划分为15等份(划分标准不一可以是20份也可以是10等份)
③每一份作为html字体大小，这里就是50px
④那么在320px设备的时候，字体大小为320/15就是 21.33px
⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
⑥比如我们以750为标准设计稿
⑦一个100100像素的页面元素在 750屏幕下， 就是 100/ 50 转换为rem 是 2rem2rem 比例是1比1
⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1
⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
总结：
①最后的公式：页面元素的rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)
②屏幕宽度/划分的份数就是 htmlfont-size 的大小
③或者：页面元素的rem值 = 页面元素值(px) / html font-size 字体大小
方案2
1.less+rem+媒体查询
2.lflexible.js+rem
4.响应式布局
4.1原理
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
父容器版心的尺寸划分
超小屏幕(手机，小于 768px)：设置宽度为 100%
小屏幕(平板，大于等于 768px)：设置宽度为 750px
中等屏幕(桌面显示器，大于等于 992px)：宽度设置为 970px
大屏幕(大桌面显示器，大于等于 1200px)：宽度设置为 1170px
但是我们也可以根据实际情况自己定义划分
4.2引用bootstrap框架
直接拿Bootstrap 预先定义好的样式来使用
修改Bootstrap 原来的样式，注意权重问题
学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果
945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
