1.流式布局
流式布局
○ 流式布局,就是百分比布局,也称非固定像素布局。
○ 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
○ 这样的布局方式,是移动web开发使用的最常用布局方式。
伸缩布局
○ CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。
○ Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。
总结
在屏幕设备尺寸不一致的情况下，使用非固定像素布局可以达到适配的目的，但是在移动端仅仅使用流失布局或者伸缩布局，还不够，因为受视口（viewport）影响。
2.响应式布局
响应式布局概念
○ 在移动互联日益成熟的时候，我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。
○ 通常的做法是针对移动端单独做一套特定的版本。
○ 但是如果终端越来越多那么你需要开发的版本就会越来越多（大屏移动设备普及）。
○ 那么Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端。
响应式布局原理
CSS3中的Media Query（媒体查询）通过查询screen的宽度来指定某个宽度区间的网页布局。
| 划分设备 | 尺寸区间 |
| 超小屏幕（手机） | 768px以下 |
| 小屏设备 | 768px-992px |
| 中等屏幕 | 992px-1200px |
| 宽屏设备 | 1200px以上 |
@media screen and (max-width: 768px){
.container{
width: 100%;
}
}
@media screen and (min-width: 768px) and (max-width: 992px){
.container{
width: 750px;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px){
.container{
width: 970px;
}
}
@media screen and (min-width: 1200px){
.container{
width: 1170px;
}
}对比针对移动端开发区别
| 开发方式 | 移动web开发+PC开发 | 响应式开发 |
| 应用场景 | 一般在已经有PC端的网站，开发移动站的时候，只需单独开发移动端 | 针对新建站的一些网站，现在要求适配移动端，所以就一套页面兼容各种终端，灵活 |
| 开发 | 针对性强，开发效率高 | 兼容各种终端，效率低 |
| 适配 | 只适配 移动设备，pad上体验相对较差 | 可以适配各种终端 |
| 效率 | 代码简洁，加载快 | 代码相对复杂，加载慢 |
总结
移动web开发和响应式开发都是现在主流的开发模式。
使用的都是流式布局，来适配不同设备。
由于终端设备的多样化，新建站的站点会优先用响应式来开发。
3、rem适配方案
rem的适配原理
○ rem是相对于页面根源素html的字体大小的一个尺寸单位
○ 页面内容可以使用rem为单位，那么html的字体大小就是一个控制尺寸的开关
○ 当设备改变的时候可以根据设备的宽度和原本设计稿的尺寸比例关系设置html的字体大小
○ 这样凡是以rem为单位的内容会根据设备做等比适配
1.假设设计稿是750px
2.假设这个时候html字体大小为100px
3.那么在320px设备的时候字体大小为100/750*320
4.只要根据这个比例在不同设备设置rem基准值(html字体大小)即可
5.改变rem基准值有两种方式：媒体查询或javascript
rem+媒体查询
/*假设的设备 320px 414px 640px */
@media (min-width: 320px) {
html{
font-size: 50px;
}
}
@media (min-width: 414px) {
html{
font-size: 64.6875px;
}
}
@media (min-width: 640px) {
html{
font-size: 100px;
}
}rem+flexible.js
○ flexible.js是手机淘宝团队做移动端适配的库
○ 我们使有它的目的只有一个根据设备设置rem基准值
< meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=.0" > < script src="flexible.js" >< / script >
基于less的rem可维护方案
//适配主流设备十几种
@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;
//设计稿尺寸
@psdWidth:750px;
//预设基准值
@baseFontSize:100px;
//设备的种类
@len:length(@adapterDeviceList);
//适配函数
.adapterMixin(@index) when ( @index > 0){
@media (min-width: extract(@adapterDeviceList,@index)){
html{
font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index);
}
}
.adapterMixin( @index - 1);
}总结
使用rem完成页面的适配，注意不一定全部都是rem,大布局的适配还是可以使用流失布局或者伸缩布局。
