什么是移动端布局
viewport
概念
ViewPort ”meta“标记用于指定用户是否可以缩放Web页面，如果可以，那么缩放到的最大最小缩放比例是什么。使用ViewPort“meta”标记还表示文档针对移动设备进行了优化。ViewPort“meta”标记的content值是有指令及其值组成的以逗号分隔的列表。
属性
width:控制viewport的宽度，可以指定一个值，也可以是devce-width代表设备的宽度
height：控viewport的高度
initial-scala：初始缩放比例，也即是页面第一次load时缩放的比例
maximum-scale:允许用户缩放到的最大比例
minimum-scale:允许用户缩放到到最小比例
user-scalable:用户是否可以手动缩放
完整的viewport标签:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
移动端布局分类
rem布局
定义：
rem是基于根元素font-size大小的单位
计算 1rem=16px(浏览器一般情况下默认字体大小为16px)，1px=0.0625rem=0.0625em 、10px=0.625rem=62.5%
兼容：完全兼容ie8以上-------ie8以下将rem值计算为px值(引入rem.js)
百分比布局：是相对于包含它的最近的父元素的高度和宽度，宽度用的比较少
vh,vm相对于视口的高度和宽度
vmin,vmax关于视口高度和宽度两者的最小值或者最大值(浏览器的宽度设置为1200px,高度设置为800px,1vmax=1200/100px=12px,1vmin=800/100px=8px)
rem:css(相对单位,相对于网站根元素,即根据html元素的font-size来计算大小,比如说html的font-size大小为50px,一个div的width为1rem,则div的width大小为50px,所以在不同屏上,只要我们动态的算出html的大小,则可起到一改俱改的效果,实现等比例放大缩小,因为html的font-size是等比算出来的.
注意：
用rem布局,可以起到等比例放大缩小的效果,但有时我们难免要对某个元素在不同屏上做一些特定的处理,我们马上就想起了媒体查询,是的,你如果单纯用rem布局,没有去动态修改viewport的缩放值,那是可以用媒体查询的,那么除了用媒体查询还有没有其他方法呢?答案是有的,根据dpr,我们在不同屏动态算出html的font-size时,顺便把dpr算出来加到html里面去,这样我们可以通过css去控制
适用与：
主要用来适配手机和ipad,除了手机和ipad，其他的都不能适配。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*目标：就是把box适配到常见的iphone5 三星 iphone6手机上*/
/*1.通过切图工具，我们得知 box在设计图（640px）上的大小是16*16px */
/*2.把设计图分成20份 1份=32px*/
/*3.iphone5的宽度=320 iphone6的宽度=375 这里指的是设备独立像素*/
/*4.使用媒体查询*/
@media screen and (width: 320px){
html {
/*在320宽的屏幕中 一份是16px*/
font-size: 16px;/*320/20=16*/
}
}
/*三星*/
@media screen and (width: 360px){
html {
/*在360宽的屏幕中 一份是18px*/
font-size: 18px;/*360/20=18*/
}
}
@media screen and (width: 375px){
html {
/*在375宽的屏幕中 一份是18.75px*/
font-size: calc(375px/20);/*375/20=18.75*/
}
}
.box {
/* 在某一屏幕中的大小=元素的尺寸/32 * 屏幕中一份的大小，即16/32*18或16/32*16，就能得到px为单位的*/
width: 0.5rem;
height: 0.5rem;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
响应式布局(使用媒体查询这个工具实现)
定义：
简而言之，就是一个网站能够兼容多个终端。CSS3中的 Media Query（媒介查询），通过查询 screen
的宽度来指定某个宽度区间的网页布局。它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。
核心语法：
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
/*你的css代码*/
}
案例：
@media screen and (width: 320px){
body {
background-color:red
}
}
@media screen and (width: 375px){
body {
background-color:green
}
}
第三方框架使用
由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如bootstrap来完成一部分工作，当然也可以自己写响应式。
bootstrap中常用类名：
col-xs-*超小屏幕（移动设备） 768px以下
col-sm-*小屏设备 768px-992px
col-md-*中等屏幕 992px-1200px
col-lg-*宽屏设备 1200px 以上
弹性盒子
关于弹性盒子的介绍
2009年，w3c提出了一种新的方案—Flex布局，可以简便,完整,响应式地实现各种页面布局。目前，它已经得到了浏览器的支持，这意味着，现在就能很安全的使用这项功能
新版的Flexbox模型是2012年9月提出的工作草案，这个草案是由w3c推出的最新语法。这个版本励志于指定标准，让新式的浏览器全面兼容，在未来浏览器的更新换代中实现统一。
基本属性
display:flex;//flex值表示弹性容器为块级，占用一行
flex-direction 决定主轴的方向(给谁加谁就是主轴)
flex-direction:row;//默认从左往右，主轴为水平方向，起点在左端
flex-direction:row-reverse ;//主轴为水平方向，起点在右端。
flex-direction:column ;//主轴为垂直方向，起点在上沿。
flex-direction:column-reverse ;//主轴为垂直方向，起点在下沿
flex-wrap 如果一条轴线排不下，如何换行
flex-wrap:nowrap;//不换行
flex-wrap:wrap;//换行
flex-wrap:wrap-reverse;(第一行在下面，第二行在上面)//换行
/简写形式：flex-flow:flex-direction flex-wrap;把改变主轴和换行写在一起/
justify-content 定义了项目在主轴上对齐方式
justify-content: 定义了项目在主轴上的对齐方式
justify-content:flex-start;//左对齐
justify-content:flex-end;//右对齐
justify-content:center;居中
justify-content: space-between;//两端对齐
justify-content:space-around;
align-item项目在交叉轴上如何对齐
align-items:flex-start;//上端
align-items: flex-end;//下端
align-items:center;//居中
align-items:stretch;//拉伸，高度拉到和容器的高度一样，不能给项目设置高度，才能使用此属性
align-content 属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
align-content:flex-start;//与交叉轴的起点对齐。
align-content:center;//与交叉轴的中点对齐
align-content:flex-end;//与交叉轴的终点对齐。
align-content: space-between;//与交叉轴两端对齐，轴线之间的间隔平均分布
align-content:space-around;//每根轴线两侧的间隔都相等
align-content:stretch;//默认平铺，轴线占满整个交叉轴。
定义：
高度定死，宽度自适应，元素都采用px做单位。随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在那个宽度需要调整的时候使用响应式布局就行（比如网易新闻），这就实现了适配。
724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
