[css][移动web][rem适配][less]移动端网页的适配

移动端适配

主流两种方案

• flex+rem单位 目前主流（小米和手淘用的较多）
• flex+vw/vh 未来趋势

长度单位

rem/vw/wh

rem

• 相对单位（相对于html标签字号大小）
• 1rem=1html字号大小

/* 根html 为 12px */
html {
   font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */       
div {
    font-size: 2rem;
}
rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

则此时 1rem 就是 35像素。

媒体查询

媒体查询一个非常大的作用是：**根据屏幕宽度修改html文字大小。**它可以检测网页视口宽度，设置rem字号

语法

@media (width:375px) {
    html {
        font-size: 40px;
    }
}

@media (width:320px) {
    html {
        font-size: 30px;
    }
}

rem布局方案中将网页等分为10份，html标签的字号视为视口宽度的十分之一。所以

rem单位尺寸=px单位数字/基准根字号

flexible

flexible是适配移动端的js库，核心原理是根据网页中的html根节点设置不同的font-size

使用的时候在body中引入js文件即可

Less

less是一个css预处理器，文件后缀为.less。它扩充了css语言，使其具备了一定的逻辑性，计算能力

less中计算

  .box{
      width: 100px+100;
      height: (200px / 2);
      height: 20px *4rem;
      height: 20px-2;
    }

多个带单位数字以第一个有单位的数字为准

less嵌套写法生成后代选择器

快速生成后代选择器

我们在写伪类和伪元素的时候，经常使用 & 来代替父元素

less写法

 .nav {
  width: 100px;
  height: 100px;
  background-color: pink;
  &::before {
    content: '1';
  }
  &:hover::before {
    color: red;
  }
}

less生成的css

.nav {
  width: 100px;
  height: 100px;
  background-color: pink;
}
.nav::before {
  content: '1';
}
.nav:hover::before {
  color: red;
}

less定义变量语法

• 定义变量：@变量名：值；

@变量名: 值;
@fontSize: 16px;

• 使用变量：css属性：@变量名；

@suibian: hotpink;
body {
  background-color: @suibian;
}
p {
  background-color: @suibian;

}
div {
  color: @suibian;
}
nav {
  border: 1px solid @suibian;
}

less导入

在less文件中添加：
@import “文件路径”；

@import url (‘文件路径’)；

less导出css文件

方法一：

 "less.compile": {
    "out": "../css/" // 设置导出css路径
  },

方法二：
1.当面目录下，创建一个 mycss 文件夹， 生成 一个 pink.css （做了改名）

// out: ./mycss/pink.css

2.当面目录下，创建一个 mycss 文件夹， 生成 一个 跟less一样的文件名（原名

// out: ./mycss/

less禁止导出

less文件中第一行添加

//out:false