rem布局、响应式布局基础知识

一、rem基础

1、em 单位 是相对于父元素 的字体大小来说的

2、rem  单位 是相对于html元素 字体大小来说的

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

二、媒体查询（Media Query）

1、 是css3新语法

2、@media 可以针对不同的屏幕尺寸设置不同的样式

3、格式：

@media mediatype and丨not丨only （media feature）{ css-Code}

4、解释：

       用@media开头 注意@符号

        mediatype 媒体类型
        all 用于所有设备   print 用于打印机和打印预览   screen用于电脑屏幕，平板电脑，智            能手机
        关键字 and not only 
        关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
        and：可以将多个媒体特性连接到一起，相对于“且”的意思
        not：排除某个媒体类型，相对于“非”的意思，可以省略
        only：指定某个特定的媒体类型，可以省略
        media feature 媒体特性 必须有小括号包含
        width：定义输出设备中页面可见区域的宽度
        min—width：定义输出设备中页面最小可见区域的宽度
        max—width：定义输出设备中页面最大可见区域的宽度

注：为了防止混乱，媒体查询我们要按照从小到大或从大到小的顺序来写，一般按照从小到大来写，这样可以让代码跟简洁（层叠性）

4、引入资源

        引入资源就是 针对不同的屏幕尺寸 调用不同的css文件
        语法：

<link rel=“stylesheet”media="mediatype and丨not丨only （media feature feature）" href="mystylesheet.css">

三、less基础 （leaner Style Sheets）

1、基础知识

①是一门css扩展语言，也成为css预处理器

②并没有减少css的功能，而是在现有的css语法上，为css加入程序式语言的特性

③在css的语法基础上，引入了变量，Mixin（混入），运算及函数等功能

④less中文网址： http：//lesscss.cn/

⑤常见的css预处理器： Sass、Less、Stylus

2、less变量

①跟css一样，需新建一个 文件名.less 文件

②内容需定义变量名

③变量名命名规范

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

 ④格式：@变量名：值；

书写内容和css一致  比如：
                body {
     color：@变量名；
}

3、less编译

通过在vscode中下载easy less插件来自动将 .less文件自动编译成 .css文件，然后将css文件正常引入就可以使用，修改时只需修改 .less文件即可

4、less嵌套

①子元素的样式直接写在父元素里面

     比如：

      css中：  div a {  color：red；}
      less中 ：  div { a { color：red；}  }

②如果有伪类、交集、伪元素选择器 我们内层选择器的前面需要加&

     比如：

   css中：  div a：hover {  color：red；}
   less中：  div { a {  &：hover{ color：red；} }  }

5、less运算

①任何数字、颜色或者变量都可以参加运算

②加 +  减 -  乘 *  除 /     符合运算法则 （可以加小括号）

③运算符左右两侧必须加空格隔开

④使用 除法/ 在括号之外不执行除法(但可以“强制”在括号with之外执行除法)

⑤两个数参与运算 如果只有一个单位，则最后的结果就是以这个单位为准

⑥两个数参与运算 如果有两个单位，则最后的结果就是以第一个单位为准

四、响应式布局

1、响应式开发的原理

①通过媒体查询针对不同的宽度的设备进行布局和样式的设置

②一般分为四档

            超小屏幕（手机） <768px
            小屏设备（平板） >=768px~<992px
            中等屏幕（桌面显示器）>=992px~<1200px
            宽屏设备（大桌面显示器） >=1200px

2、响应式布局容器

①需要一个父级做容器，来配合子级元素来实现变化效果

②通过媒体查询改变布局容器的大小，再改变里面子元素的排列方式和大小

③响应式（常用）尺寸划分

            超小屏幕（手机，小于768px）：设置宽度为100%
            小屏设备（平板，大于等于768px）：设置宽度为750px
            中等屏幕（桌面显示器，大于等于992px）：设置宽度为970px
            宽屏设备（大桌面显示器，大于等于1200px）：设置宽度为1170px