移动Web开发之rem布局、Less入门、flexible.js入门

移动web开发之rem布局

rem基础

rem单位

	rem是一个相对单位，类似em，em是相对于父元素的字体大小
	rem是相对于html元素的字体大小

媒体查询

什么是媒体查询

	使用@media查询，可以针对不同类型的媒体类型定义不同的样式
	@media 可以针对不同的屏幕尺寸设置不同的样式
	当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 
	目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

媒体查询语法规范

	//最好是从小到大写
	@media screen and (min-width:320px){
			//当屏幕大于320px时
	}
	@media screen and (min-width:640px){
			//当屏幕大于640px时
	}
	@media screen and (max-width:970px){
			//当屏幕大于640px,小于970px时
	}

less 基础

less 安装

		1.先安装node.js
		2.再用cmd查询node版本		命令：node -v
		3.使用npm安装less				命令：npm install -g less
		4.再用cmd查询less版本		命令：lessc -v
		5.使用vscode可以下载easy less 插件（自动编译less文件）
		

less基础

less变量

		//定义变量
		@color:pink;
		//使用变量
		background-color:@color;

less嵌套

		/*以前的css样式写法*/
		div{
			width:100px;
			height:100px;
		}
		div a{
			color:#fff;
			text-decoration:none;
		}
		div a::after{
			content:"";
			display:block;
			width:20px;
			height:20px;
			background-color:pink;
		}

		/*使用less嵌套写法如下*/
		div{
			width:100px;
			height:100px;
			a{
				color:#fff;
				text-decoration:none;
				/*使用伪类选择器 需要加入&  & 表示当前选择器的父级*/
				&:after{
					content:"";
					display:block;
					width:20px;
					height:20px;
					background-color:pink;
				}
			}
		}
		

rem实际开发适配方案

		1.当设计稿为750px;
		2.我们手动将屏幕分为15等份（10等份，20等份也可以）
		3.那么html元素的字体大小则等于 750/15=50px
		4.那么在320px设备的时候，html元素的字体大小则等于320/15=21.33px
		5.当一个100*100px的元素，在750px设备下，就是 100px/50px=2rem  即是2rem*rem元素
		6.当一个100*100px的元素，在320px设备下，2rem*21.33=42.66px 比例还是1：1

		总结：

		①最后的公式：页面元素的rem值 =  页面元素值（px） /  （屏幕宽度  /  划分的份数）
		
		②屏幕宽度/划分的份数就是 htmlfont-size 的大小
		
		③或者：页面元素的rem值 =  页面元素值（px） /  html font-size 字体大小

	less+rem+媒体查询 移动web开发demo
	[less+rem+媒体查询 移动web开发demo](https://wws.lanzous.com/iOSSyncqlkh)

flexible.js入门

配合vscode使用cssrem插件

		cssrem插件		默认html元素字体大小为16px  要进入settings.jsoon修改 cssroot
		flexible.js		默认将屏幕分成10等份

		[flexible.js+rem适配布局案例](https://wws.lanzous.com/io3G5ncs38j)