移动适配方案rem

1.适配方案

移动端的适配方案：

1.flex rem单位  做适配效果   （比如淘宝和小米移动端）当前市场最多

2.flex viewport  width/vh单位 做适配效果 （比如B站移动端） 新兴，马上的一个趋势

让flex做布局（盒子摆放），让rem或者vw/ vh 实现网页元素的尺寸（宽度和高度）适配屏幕

2.rem适配 

2.1.rem单位

rem 是一个相对单位，1 rem就是html文字的大小

比如

1.  
   html {
2.  
   font-size: 35px;
3.  
   }

则此时 1 rem就是35像素。

2.2.媒体查询（了解）

媒体查询 mediaquery 可以自动检测视口的宽度。

媒体查询一个非常大的作用是：根据屏幕宽度修改html文字大小。

使用媒体查询，根据不同的视口宽度，设置不同的根字号，就完成了适配

语法：

1.  
   @media (width:375px) {
2.  
   html {
3.  
   font-size: 40px;
4.  
   }
5.  
   }
6.  
    
7.  
   @media (width:320px) {
8.  
   html {
9.  
   font-size: 30px;
10.  
    }
11.  
    }

综合：

1.  
   @media (width:375px) {
2.  
   html {
3.  
   font-size: 37.5px;
4.  
   }
5.  
   }
6.  
   @media (width:414px) {
7.  
   html {
8.  
   font-size: 41.4px;
9.  
   }
10.  
    }
11.  
     
12.  
     
13.  
    .box {
14.  
    width: 5rem;
15.  
    height: 5rem;
16.  
    background-color: pink;
17.  
    }

通过媒体查询，检测不同的视口宽度，设定不同的html文字大小，元素设置rem单位后，可以达到元素适配效果

 2.3.flexible.js

媒体查询写起来超级麻烦，而且检测不够精确，因此我们使用 flexible.js 这个js文件，通过js实时检测屏幕窗口的变化实现检测视口的宽度。

这个也是值得提倡使用的一种方式。

有了这个js文件，可以帮我们自动检测屏幕宽度，自动修改html文字的大小，这样就可以让盒子配合rem完成适配。

<script src="./js/flexible.js"></script>

2.4.如何把设计稿的px转换为rem

1. flexible 能够修改html文字大小，修改文字大小: 当前屏幕 / 10 就是文字大小

   例如： 当前屏幕 375px，则加了 flexible之后，html文字大小为 37.5px

2. 我们的设计稿里面元素大小是固定的吗？ 是 ， 而是 px 单位 ，但是我们开发的时候，要使用 rem 才能适配。

3. 那怎么把我们测量的px 转换为适配的rem呢？

 直接使用测量的px值 / 37.5就是 rem 的值

3.LESS

less可以帮我们把px单位转换到rem单位。

less是一个CSS预处理器，less文件后缀是.less

扩充了CSS语言，使CSS具备一定的逻辑性、计算能力。

3.1.less运算

1.  
   .box {
2.  
   width: 100px 100;
3.  
   // 注意：单位的转换 计算的时候以第一个单位为准
4.  
   height: (100 / 37.5rem);
5.  
   // height: (100rem / 37.5);
6.  
   // height: 100px - 50;
7.  
   margin: (20px * 5) auto;
8.  
   padding: (10px / 5);
9.  
   border: 1px 2 * 3 solid red;
10.  
     
11.  
    }

注意点：

1.计算以第一个单位为准，尽量写到最后一个数字上。比如

 height: (100 / 37.5rem);

2.除法比较特殊，必须添加小括号。

3.计算别忘了先乘除后加减

3.2.less嵌套

可以生成后代选择器

1.  
   .father {
2.  
   width: 500px;
3.  
   height: 500px;
4.  
   background-color: purple;
5.  
   // 孩子
6.  
   .son {
7.  
   width: 200px;
8.  
   height: 200px;
9.  
   background-color: pink;
10.  
    p {
11.  
    color: red;
12.  
    }
13.  
    }
14.  
     
15.  
    }

生成css之后：

1.  
   .father {
2.  
   width: 500px;
3.  
   height: 500px;
4.  
   background-color: purple;
5.  
   }
6.  
   .father .son {
7.  
   width: 200px;
8.  
   height: 200px;
9.  
   background-color: pink;
10.  
    }
11.  
    .father .son p {
12.  
    color: red;
13.  
    }

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

1.  
   .nav {
2.  
   width: 100px;
3.  
   height: 100px;
4.  
   background-color: pink;
5.  
   &::before {
6.  
   content: '1';
7.  
   }
8.  
   &:hover::before {
9.  
   color: red;
10.  
    }
11.  
    }

1.  
   .nav {
2.  
   width: 100px;
3.  
   height: 100px;
4.  
   background-color: pink;
5.  
   }
6.  
   .nav::before {
7.  
   content: '1';
8.  
   }
9.  
   .nav:hover::before {
10.  
    color: red;
11.  
    }

3.3.less变量

变量最大的优点是：方便使用和修改。

语法：

1.  
   @变量名: 值;
2.  
   @fontSize: 16px;

1.  
   @suibian: hotpink;
2.  
   body {
3.  
   background-color: @suibian;
4.  
   }
5.  
   p {
6.  
   background-color: @suibian;
7.  
    
8.  
   }
9.  
   div {
10.  
    color: @suibian;
11.  
    }
12.  
    nav {
13.  
    border: 1px solid @suibian;
14.  
    }

1.  
   body {
2.  
   background-color: hotpink;
3.  
   }
4.  
   p {
5.  
   background-color: hotpink;
6.  
   }
7.  
   div {
8.  
   color: hotpink;
9.  
   }
10.  
    nav {
11.  
    border: 1px solid hotpink;
12.  
    }

3.4.小练习

需求1： 使用less 完成以下效果 大盒子 father 小盒子 son

需求2： 鼠标经过大盒子，小盒子颜色变为 hotpink色

需求3： 请将 hotpink 颜色定义为一个变量。 @bgColor

1.  
   // 背景颜色变量
2.  
   @backGroundColor: deeppink;
3.  
   // 定义边框
4.  
   @bd: 3px solid green;
5.  
   .father {
6.  
   width: 500px;
7.  
   height: 500px;
8.  
   background-color: pink;
9.  
   display: flex;
10.  
    justify-content: center;
11.  
    align-items: center;
12.  
    border: @bd;
13.  
    .son {
14.  
    width: 200px;
15.  
    height: 200px;
16.  
    background-color: skyblue;
17.  
    border: @bd;
18.  
    }
19.  
    // &:hover .son {
20.  
    // background-color: hotpink;
21.  
    // }
22.  
    &:hover {
23.  
    .son {
24.  
    background-color: @backGroundColor;
25.  
    }
26.  
    }
27.  
    }

 3.5.less导入

less的导入实际是 less 文件的导入。

1.  
   @import './变量.less';
2.  
   @import url(./变量.less);

使用less 导入的好处是：减少了html页面的link标签数量。

3.6.less导出

可以使用插件来设置导出：

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

手动给每个less文件指定导出

导出必须写到第一行

// out: 路径/文件名

// out: ./mycss/pink.css

设置导出：当前目录下，创建一个mycss文件，生成一个pink.css（做了改名）

// out: ./mycss/

3.7.less禁止导出

// out: false

4.小结

我们的需求是要做移动端适配：页面中的元素尺寸跟随屏幕宽度等比例缩放（适当调整大小）

方案如下：

flex rem flexible.js less

1.我们移动端采取flex布局。

2.rem单位：做移动端适配的。

       rem相对单位，跟html文字大小有关系

3.媒体查询:  检测屏幕的视口宽度

4.flexible.js：可以根据屏幕的宽度自动修改html文字大小

5.less：less让我们的css具有了计算能力

      less可以让我们很方便的吧px转换为rem

这篇好文章是转载于：学新通技术网