less 的一些简单用法【黑马web前端】

更新时间:2019年07月26日 11时14分57秒来源:黑马程序员论坛

Rem,媒体查询适配方案
Less基础语法介绍
作用: 维护CSS, 按照CSS的基本语法去写.

https://less.bootcss.com/

变量
☞@自定义变量名: 值;
例如:
@nav_bgcolor: red;
nav {
      color: @nav_bgcolor;
}

☞变量的运算:
      @width: 10;
nav {
            width: @width * 3px;
}

混合
☞ 定义一个公共的样式(可以式类选择的语法,可以是ID选择器的语法)

例如:
      .test() {
      width: 50px;
      height: 50px;
}

nav {
      调用样式
      .test();
}

header {
      .test();
}

☞ 可以设置参数
例如:
.test(@width) {
width: @width;
}

nav {
.test(100px);
}

☞ 可以为参数设置默认值
例如:
.test(@width: 100px) {
width: @width;
}
nav {
.test();
}
header {
.test(50px);
}

嵌套
例如:
nav {
ul {
      li {

      }
}
}

Less特点小结：

支持嵌套写法（结构清晰）
支持变量写法（维护方便）
支持函数写法（复用性强）
支持数学运算
媒体查询
什么是媒体查询?
1, 媒体指的就是各种设备(移动设备,PC设备)
2, 查询指的就是要检测属于哪种设备
总结:
      媒体查询:通过查询当前属于哪种设备,让网页能够在不同的设备下正常的预览

学习媒体查询的核心是什么?
实现页面在不同设备下正常预览.[判断当前设备]

媒体类型
将不同的设备划分为不同的类型,称为媒体类型

all (所有的设备)
print (打印设备)
screen(电脑屏幕,平板电脑),智能手机
媒体特性
用来描述设备的特点,比如宽度,高度...
1
width       网页显示区域完全等于设置的宽度
height 网页显示区域完全等于设置的高度
max-width / max-height 网页显示区域小于等于设置的宽度
min-width / min-width 网页显示区域大于等于设置的宽度
orientation: portrait (竖屏模式) | landscape (横屏模式)
语法关键字
目的将媒体类型和媒体特性链接到一块,进行设备检测
1
and       可以将多个媒体特性链接到一块,相当于且
not 排除某个媒体特性相当于非,可以省略
only 指定某个特定的媒体类型, 可以省略
语法
外联式语法

<link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)">
1
内嵌式语法

@media only screen  and (max-width: 420px) {
      body {
            background-color: red;
      }
}

备注: 多个条件联写
@media only screen and (width: 320px) and (height: 568px) {}

Rem
什么是REM?
Rem: 是一个单位,是一个相对单位

em: 是一个单位,是一个相对单位,参照当前文字大小设置的

Rem的特点?
参照HTML根标签的文字大小

Rem如何实现适配?
1. 常见的UI稿件尺寸大小 640px(20份)  或者  750px(常见)[25份]

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

上海中心

less 的一些简单用法【黑马web前端】

相关阅读