了解rem
- em: 相对于父元素的字体大小来说的
- rem: 相对于html 元素的字体大小来说的
- rem的优点是可以通过修改html里卖弄的文字大小来改变页面的元素大小以整体控制
媒体查询(Media Query):是css3的新语法
- 使用@media查询,可以针对不同的媒体类型定义不同的样式
- @media可以针对不同的屏幕尺寸设置不同的样式
语法规范:
mediatype 查询类型
- all:用于所有设备
- print:用于打印机和打印预览
- screen:用于电脑屏幕、平板电脑、智能手机等
关键字
- and:可以将多个媒体特性连接到一起,相当于 ‘且’ 的意思
- not:排除某个媒体类型,相当于 ‘非‘ 的意思,可以省略
- only:指定某个特顶的媒体类型,可以省略
媒体特性(暂且了解三个)
- width:定义输出设备页面可见区域的宽度
- min-width:输出设备中页面最小可见区域宽度(意思是当宽度大于等于某个宽度时会发生啥事)
- max-width:输出设备中页面最大可见区域宽度(意思是当宽度小于等于某个宽度时会发生啥事)
- 为了防止因为覆盖导致的问题我们按着从小到大的顺序来写,这样代码更简洁,例如:
less基础
变量:(@变量名:值;)
- 命名规范
- 必须有@为开头
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
less嵌套:如下图所示,注意一个&的使用方法
less的运算:
注意:less的运算细节以及单位问题
- 乘号 * 和除号 / 的写法,除法运算要用圆括号括起来
- 运算符中间左右用一个空格隔开: 1px + 5
- 对于不同单位的值之间的运算,运算结果的值取第一个值的单位
- 如果两个值之间只有一个单位,则运算结果就取该单位