移动web开发rem布局rem基本媒体查询less基本rem适配方案1、rem基础知识1、rem单位rem（根em）是相对单位，类似于em，em是父元素的字体大小。不同的是，rem的基数是相对于html元素的字体大小的。rem的优点：父元素的文字大小可能不一致，但是整个页面只有一个html，可以很好的控制整个页面的元素大小。例如，如果根元素(html)设置font-size=12px；如果非根元素设置了width:2rem；然后换成px表示24px。/\*根html是12px\*/html{font-size:12px;}/\*此时div的字体大小为24px\*/div{font-size:2rem;}二、媒体查询1、什么是媒体查询媒体查询（MediaQuery）是CSS3的一种新语法。使用@media查询，可以为不同的媒体类型定义不同的样式@media可以为不同的屏幕尺寸设置不同的样式当你重新设置浏览器尺寸时，页面也会根据浏览器的宽高重新渲染页面目前多用于苹果手机、安卓手机、平板等设备。2.媒体查询语法规范以@media开头注意@symbolmediatype媒体类型关键字而不仅仅是mediafeaturemediafeatures必须有括号包含@mediamediatypeand|not|only(mediafeature){CSS-Code;}(1)mediatype查询类型将不同的终端设备分为不同的类型，称为媒体类型(2)Keyword关键字设置媒体类型或多个媒体属性链接在一起作为媒体查询的条件。and：多个媒体特征可以连在一起，相当于“and”的意思。not：排除某种媒体类型，表示“不是”，可以省略。only：指定具体的媒体类型，可以省略。(3)媒体特性每种媒体类型都有其特定的特性，根据不同媒体类型的媒体特性设置不同的显示风格。我们现在知道三个。注意他们需要加括号来包含(4)Mediaquery写法注意：为了防止混淆，我们应该按照从小到大或者从大到小的顺序来写mediaquery，但是我们最喜欢的是从小到写large,这样代码更简洁/*1.媒体查询一般按照从大到小或者从小到大的顺序执行*//*2.小于540px的页面背景色变为蓝色*/@mediascreen和（最大宽度：539px）{主体{背景色：蓝色；}}/*3.540~970我们的页面颜色改为绿色*//*@mediascreenand(min-width:540px)and(max-width:969px){body{background-color:green;}}*/@mediascreenand(min-width:540px){body{background-color:green;}}/*4.大于等于970，我们页面的颜色变为红色*/@mediascreenand(min-width:970px){body{background-color:red;}}/*5.screenandand必须包含*//*6.我们的数字后面必须有单位970px这个px不能省略*/3.less的基础1.css的维护缺点CSS是非编程语言，没有变量、函数、SCOPE（作用域）等概念。CSS需要写很多看似不合逻辑的代码，CSS冗余度比较高。不方便维护和扩展，不利于复用。CSS没有很好的计算能力对于非前端开发工程师来说，由于缺乏CSS编写经验，往往很难写出条理清晰、易于维护的CSS代码项目。2.Less简介Less（LeanerStyleSheets的缩写）是一种CSS扩展语言，也是一种CSS预处理器。作为CSS的一种扩展形式，它并没有减少CSS的功能，而是在现有CSS语法的基础上，为CSS增加了过程化语言的特性。它在CSS语法的基础上，引入了变量、Mixin（混入）、操作、函数等功能，大大简化了CSS的编写，降低了CSS的维护成本。顾名思义，Less让我们用更少的代码做更多的事情。Less中文网址：http://lesscss.cn/常用的CSS预处理器：Sass、Less、Stylus总而言之：Less是一种CSS预处理语言，扩展了CSS的动态特性。less安装安装nodejs，可选版本（8.0），网址：http://nodejs.cn/download/检查是否安装成功，使用cmd命令（win10是window+r打开运行输入cmd）---输入“node-v”查看版本，可以在线安装基于nodejs的Less，使用cmd命令“npminstall-gless”查看是否安装成功，使用cmd命令“lessc-v”"查看版本LessVariables指的是没有固定值，可以更改。因为我们CSS中的一些颜色和值是经常用到的。@变量名：值；必须以@为前缀不能包含特殊字符不能以数字开头区分大小写@color:pink;Less编译vocodeLess插件EasyLESS插件用于将less文件编译成css文件安装插件后，重新加载下载vscode。只需保存Less文件，CSS文件就会自动生成。少嵌套//把css改成less#header.logo{width:300px;}#header{.logo{宽度：300px；}}如果遇到(intersection|pseudo-class|pseudo-elementselector)，使用&连接a:hover{color:red;}a{&:hover{颜色：红色；}}Less运算任何数字、颜色或变量都可以参与运算。也就是说，Less提供了加法（+）、减法（-）、乘法（*）和除法（/）的算术运算。/\*里面少写\*/@witdh:10px+5;div{边框：@witdh纯红色；}/\*generatedcss\*/div{border:15pxsolidred;}/\*Lesseven可以这样\*/width:(@width+5)\*2;乘号（*）和除号（/）的书写运算符之间有一个空格，用于隔开1px+5的两个不同单位的数值计算之间，计算结果取值第一个值的单位。如果两个值之间只有一个值有单位，则计算结果取该单位。4、rem适配方案，允许一些不能按比例自适应的元素，这样当设备尺寸发生变化时，会按比例适配当前设备。使用媒体查询根据不同设备按比例设置html字体大小，然后使用rem作为页面元素的大小单位。当html字体大小发生变化时，元素大小也会发生变化，从而实现比例缩放适配。技术方案：less+rem+mediaquerylflexible.js+rem总结：目前两种方案都存在。方案2更简单，现阶段不需要看懂里面的js代码。1.Rem实际制定适配方案11.假设设计稿为750px2。假设我们把整个屏幕分成15等份（不同的划分标准可以是20等份，也可以是10等份）3.每份作为一个html字体大小，这里是50px4。那么在320px的设备上，字体大小是320/15，也就是21.33px5。将我们页面元素的大小除以不同的html字体大小，我们会发现它们的比例还是一样的6。比如我们使用750作为标准设计稿7。一个100_100像素的页面元素在750屏幕下，即就是，100/50换算成rem就是2rem_2rem比例是1比18，320屏下，html字体大小是21.33，那么2rem=42.66px此时width和height都是42.66，但是宽高比例是还是1到19。不过已经可以实现不同屏幕下页面元素框按比例缩放的效果了。总结：最终公式：页面元素的rem值=页面元素值（px）/（屏幕宽度/分割数）屏幕宽度/分割数就是htmlfont-size的大小或者：页面元素的rem值=页面元素value(px)/htmlfont-size字体大小2，rem适配方案2手机淘宝团队开发的简单高效的移动端适配库-`flexible.js`我们不再需要为不同的屏幕编写媒体查询，因为里面的js处理了。它的原理是将当前的设备分成10等份，但是在不同的设备下，比例还是一样的。我们要做的是确定我们当前设备的html文本大小。比如当前的设计稿是750px，那么我们只需要将html文字大小设置为75px（750px/10）就可以得到页面元素的rem值：page元素的px值/75等，让flexible.js计算github地址：https://github.com/amfe/lib-flexible总结：因为flexible默认把屏幕分成10等份，但是当屏幕大于750的时候，希望不再重置html字体，只好通过mediaquery设置，权重调到最高VSCodepx转换rem插件cssrem因为cssrem中css自动转rem是指默认的16位转换插入。需要配置
