rem

1.rem基础

 

rem单位

rem (root em)是一个相对单位，类似于em , em是父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小。

比如，根元素( html ） 设置font-size=12px;,非根元素设置width:2rem;则换成px表示就是24px.

rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制。

2.媒体查询

2.1什么是媒体查询

媒体查询(Media Query )是CSS3新语法。

使用@media查询，可以针对不同的媒体类型定义不同的样式@media可以针对不同的屏幕尺寸设置不同的样式

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

 

2.2语法规范

@media mediatype and | not | only (media feature) {

css-code;

}

• 用@media开头注意@
• 符号mediatype 媒体类型
• 关键字and not only
• media feature 媒体特性必须有小括号包含
   

1.mediatype查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

 

2.关键字

关键字将媒体类型或多个媒体特性连接到─起做为媒体查询的条件。

• and:可以将多个媒体特性连接到一起，相当于“且”的意思。
• not:排除某个媒体类型，相当于“非”的意思，可以省略。
• only :指定某个特定的媒体类型，可以省略。

3.媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意他们要加小括号包含

2.3媒体查询+rem实现元素动态大小变化

rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸媒体查询可以根据不同设备宽度来修改样式守

媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化

3.Less基础

3.1 Less变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

@变量名:值;

1.变量命名规范

• 必须有@为前缀
• 不能包含特殊字符
• 不能以数字开头大小写敏感

3.2 Less嵌套

我们经常用到选择器的嵌套

#header .logo {
width: 300px;}

Less嵌套写法

#header {
.logo {
width : 300px;
}
}

如果遇见（交集|伪类|伪元素选择器)
内层选择器的前面没有&符号，则它被解析为父选择器的后代;如果有&符号，它就被解析为父元素自身或父元素的伪类。

3.3 Less运算★

任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。

注意∶

• 乘号(*）和除号(/)的写法
• 运算符中间左右有个空格隔开1px + 5
• 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位如果两个值之间只有一个值有单位，则运算结果就取该单位

4.rem适配方案

4.1 rem 实际开发适配方案1

1 rem ＋媒体查询+less技术

1.1 元素大小取值方法

最后的公式︰页面元素的rem值=页面元素值( px)/（屏幕宽度│划分的份数)②屏幕宽度/划分的份数就是html font-size的大小

或者:页面元素的rem值=页面元素值( px ) / html font-size字体大小