移动端基础知识

• 视口

- device-width: 设备宽度- initial-scale: 初始的缩放比例- minimum-scale=1:允许用户缩放到的最小的比例- maximum-scale=1:允许用户缩放到的最大的比例- user-scalable:用户是否可以手动缩放

• 自适应的单位（px, em, rem）
  • px: 在web页面初期的制作中，我们会使用px来设置我们的文本，他比较稳定和精确。
  • em: 浏览器中放大或者是缩小的时候 em 能改变大小， （大小会随着父级元素的大小改变而改变）;
  • rem: 浏览器中放大或者是缩小的时候 rem 能改变大小， （大小会随着根级元素的大小改变而改变）;
  • 16px = 1em
  • 16px = 1rem
• rem换算关系
  • html{font-size: 62.5%; /* 10 / 16 * 100% = 62.5%*/} 10px = 1rem
  • html{font-size: 625%; /* 100 / 16 * 100% = 625%*/} 100px = 1rem
• 媒体查询

@media{}	链接引用方式	
    	@media screen and (min-width: 600px) and (min-width: 600px) {		选择器：{			属性： 属性值；		}	}

• 多列
  • column-count 指定设置的栏目的列数
  • column-width 指定设置的栏目的宽度
  • column-gap 改变栏目之间的长度 默认是1em
  • column-rule 间隔的位置的边框 (分割线)
  • column-break-inside: avoid; 为了避免item被拦腰截断 （针对于子元素的）

多列demo			
    				
    								
    
			
     
				
      
					
       					
       
第七次课水电费
					
       
上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf
				
      
				
      
					
       					
       
第七次课水电费
					
       
上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf
				
      
				
      
					
       					
       
第七次课水电费
					
       
上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf
				
      
				
      
					
       					
       
第七次课水电费
					
       
上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf
				
      
				
      
					
       					
       
第七次课水电费
					
       
上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf
				
      
				
      
					
       					
       
第七次课水电费
					
       
上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf
				
      
				
      
					
       					
       
第七次课水电费
					
       
上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf
				
      
				
      
					
       					
       
第七次课水电费
					
       
上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf
				
      
			
     
		
    
					

• 伸缩性盒模型（Flexible-box）
  • 容器属性: 属性决定了主轴的方向
  • 个轴线排不下， 怎么去换行 flex-wrap： nowrap | wrap | wrap-reverse nowrap(默认)： 不换行
    • row(默认值)： 主轴为水平方向，起点在左端
    • column： 主轴为垂直方向，起点在上方
    • row-reverse：主轴为水平方向，起点在右边
    • column-reverse：主轴为垂直方向，下方
  • flex-wrap属性 | 如果一个轴线排不下， 怎么去换行
    • flex-wrap： nowrap | wrap | wrap-reverse
    • nowrap(默认)： 不换行
    • wrap： 换行， 第一行在上方
    • wrap-reverse： 换行，第一行在下方
• flex-flow | 属性值是flex-direction属性和flex-wrap属性的简写形式
• justify-content: flex-start | flex-end | center | space-between | space-around
  • flex-start(默认值): 左对齐
  • flex-end(默认值): 右对齐
  • center: 居中
  • space-between: 两端对齐， 项目之间都相等
  • space-around: 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍