你一定要会的适配技巧和组件化思想

你一定要会的适配技巧和组件化思想

rem：利用它能实现强大的屏幕适配布局

less：Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。(代表的有less，Sass，stylus)

模板引擎：art-template（实现组件化，代码不复用，提高开发效率）(当然还有很多其它好用的模板引擎，但原理上基本一样。)

说明

• 本文将介绍以rem（结合流式布局）+less（为代表）的适配方式
• 模板引擎上以将以art-template举例说明。（模板引擎 ==> 这里特指用于Web开发的模板引擎,是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。）

需求分析

为什么 rem+less 会产生？

• rem ：rem是相对长度单位，相对于根元素font-size计算值的倍数（通俗来讲，相对于html字体大小）

  这种需求主要产生在移动端，因为随着科学水平的发展，手机产业发展非常迅速，作为一个前端工作者，大量的手机页面需要我们去书写，而现在市面上的手机大小不一（分辨率各不相同），一种适配所有手机的页面开发模式需求应由而生。（px为一种固定的像素单位，不太适合需求），之后流式布局，响应式布局等随之产生，rem的作用也逐渐凸显出来。

如何使用rem+less呢？

===>新建个less目录，在里面做如下操作：

1.新建 variable.less（名字随便都可以，反正这是一个表示变量的less文件）

@charset "utf-8";
//适配主流设备
@adapterDeviceList:750px,720px,640px