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

你一定要会的适配技巧和组件化思想rem:利用它能实现强大的屏幕适配布局less:Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。(代表的有less,Sass,stylus)模板引擎:art-template(实现组件化,代码不复用,提高开发效率)(当然还有很多其它好用的模板引擎,但原理上基本一样。)说明本...
摘要由CSDN通过智能技术生成

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

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

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

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

说明

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

需求分析

为什么 rem+less 会产生?

  • remrem是相对长度单位,相对于根元素font-size计算值的倍数(通俗来讲,相对于html字体大小)

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

如何使用rem+less呢?

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

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

@charset "utf-8";
//适配主流设备
@adapterDeviceList:750px,720px,640px
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值