移动端布局学习小结

1 calc 计算单位             //-------->只支持高级浏览器

 width:calc(500px - 100px)  //--400px;   中间一定要有空格   + - * /      %都可以。

2 去边框布局自适应  可以用 box-sizing:border-box(全局)   也可以用 width:calc(100/3 - 2px)   (意思就是分成3分 边框是1px  每一分减去左右边框)

3 盒子模型   

盒子模型=width+border+padding

box-sizing:border-box           ---->想内扩展

box-sizing:content-box        ------>想外扩展

4 居中

盒子居中 position:absolute;left:50%;top:50%;margin-left:-(width/2)px;margin-top:-(height/2)px;

position:absolute;left:0; top:0;bottom:0;right:0; margin:auto;

display:-webkit-box; -webkit-box-pack:center;  -webkit-box-align:center;

文字居中    父元素加     display:table  ==== table

  子元素加     display:table-cell   ===== tr/td;

5 弹性盒子(弹性布局) * 子级划分宽度，父级先减去固定宽度，然后剩下的看系数(1系数)

旧版

	1). 子级不能有浮动
	2). 子级宽度竟然没有平分

父级：display:-webkit-box;

   -webkit-box-direction:reverse      左右翻转（颠倒）

   -webkit-box-orient:vertical;垂直方向（排列方式）

   -webkit-box-pack:center;

				start   左
				center 居中
				end    右
				justify    两端对齐

	   -webkit-box-align:center;
				start
				center
				end

子集：-webkit-box-flex:1;

新版

父级：display:flex;

  flex-direction:column-reverse;纵向翻转（上下）

	  flex-wrap: wrap;    子元素是否换行

	  flex-flow: direction wrap   是direction和wrap简写

	  justify-content:flex-start/flex-end 水平排列
              		 center
              		 space-between     两端对齐
             		  space-around      平分空隙
	   align-items: center;         纵向排列

	   align-content:flex-start/center/flex-end   多行排列方式

子集：flex:1;

6 手机设备宽度:

   iphone5    320
   iphone6    375
   iphone6p   414
   
   android手机  360

7 移动端需要加meta标签

	默认也可以展示-> 以980  视窗大小

	
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

  	 width=device-width 视窗大小
  	 initial-scale=1.0  初始放大比例
   	user-scalable=no   是否允许用户缩放页面
 	  maximum-scale=1.0  允许用户缩放页面最大比例
  	 minimum-scale=1.0  允许用户缩放页面最小比例

	苹果专有:
	<meta name="apple-mobile-web-app-capable" content="yes">   网页允许以app形式运行
 	  添加主屏幕
	<meta name="apple-mobile-web-app-status-bar-style" content="black">  状态栏颜色

	其他:
	<meta name="format-detection" content="telephone=no, email=no">  禁止识别电话
	<meta content="yes" name="apple-touch-fullscreen"/>    点击全屏显示
	<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>
8 rem自适应
	
	20px    320
	？  clientWidth

	?=20*clientWidth/320+'px'

	通过js改变html字体大小:
 	  document.documentElement.style.fontSize=20*document.documentElement.clientWidth/320+'px';
 	  window.οnresize=function(){
   	    document.documentElement.style.fontSize=20*document.documentElement.clientWidth/320+'px';
 	  };