移动端-less+rem+媒体查询布局

less+rem+媒体查询布局

rem单位

• rem(root em)是一个相对单位，类似于em，em是父元素的字体大小
• 不同的是rem的基准是相对于html元素的字体大小

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

媒体查询（Media Query）

• 使用@media查询，可以针对不同的媒体类型定义不同的样式
• 使用@media可以针对不同的屏幕尺寸设置不同的样式
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
• 目前针对很多苹果手机、Android手机、平板等设备都用得到多媒体查询

语法规范

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

• 用@media开头 注意@符号
• mediatype 媒体查询类型

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

• 关键字 and not only

关键字可以将媒体类型或多个媒体特性连接到一起作为媒体查询条件

• media feature 媒体特性，必须有小括号包含

每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，注意要加小括号

引入资源
当样式比较繁多的时候，我们可以针对不同的媒体使用不同的stylesheets（样式表）
原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件

<link rel="stylesheet" media="mediatype and|ont|only (media feature)" href="style.css">

LESS使用

• Less变量

   @变量名: 值;
   /* 必须有@为前缀 */
   /* 不能包含特色字符 */
   /* 不能以数字开头 */
   /* 大小写敏感 */

• Less编译

• Less嵌套

   /* 经常用到的选择器嵌套 */
   .bxo1 .box2 {
       width: 300px;
   }
  
   // Less嵌套写法
   .bxo1 {
       .box2 {
           width: 300px;
       }
   }

如果遇见（交集|伪类|伪元素选择器）

    // 内层选择器的前面没有加&符号，则它被解析为父选择器的后代
    // 如果有&符号，它就会被解析成父元素自身或父元素的伪类
    .box1 {
        a {
            &:hover {
                color: red;
            }
        }
    }

• Less扩展

   // 将其他的less引用到当前less中，模块化
   @import url("common.less");
  
   // Less引用已有的值
   .bxo1 {
       .box2 {
           width: 300px;
           height: $width;
       }
   }
  
   // :extend() 对当前选择器扩展指定选择器的样式
   .p1 {
       width: 300px;
       height: 300px;
   }
  
   .p2:extend(.p1) {
       color: red;
   }
  
   // 直接对指定的样式进行引用，这里就相当于将.p1的样式在这里进行了复制
   .p3 {
       .p1();
   }
  
   // 使用类选择器时可以在选择器后面添加一个括号，它不会被解析到CSS中，可以直接引用它
   .p4() {
       width: 100px;
       height: 100px;
       backgoound-color: #fff;
   }
   .p5 {
       .p4();
   }
  
   // 混合函数 在混合函数中可以直接设置变量
   .test(@w, @h) {
       width: @w;
       height: @h;
   }
  
   // 混合函数 在混合函数中设置变量默认值
   .test(@w200px, @h300px) {
       width: @w;
       height: @h;
   }
  
   div {
       // 调用混合函数，按顺序传递参数
       .test(200px, 300px);
       // 调用混合函数，不按顺序传递参数
       .test(@h:300px, @w:200px);
       // 调用混合函数，使用默认值
       .test();
   }
  
   // 颜色加深函数darken
   body {
       background-color: darken(#bfa, 10%);
   }

• Less运算

元素大小取值方法

①最后的公式：页面元素的rem值 = 页面元素值（px）/（屏幕宽度 / 划分的份数）
②屏幕宽度/划分的份数就是html font-size的大小
③或者：页面元素的rem值 = 页面元素值（px）/ html font-size字体大小