移动端自适应：rem和vw

第一部分rem

一. rem的概念

1 rem等于页面HTML标签字号大小16px（谷歌）

二.媒体查询的概念

通过设置媒体查询在多大屏幕显示多大的字号大小：可以设置在此范围内HTML的字体大小。从而做到rem的自适应。

@media (width: 375px) {

html { font-size: 20px; }

}

三：使用flexible.js文件来实现适配 （clientWidth是对象可见的宽度）

（1）flexible.js手淘框架的核心原理就是根据不同的对象可见宽度（width），给网页中html节点设置不同的font-size，然后所有的距离大小都用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了，flexble.js通过将clientwidth等分成了10份，每份为1 rem。10rem为100%width

四：less概念

因为.css文件无法计算除法，所以移动端rem和vw一般是在less文件输写。

五.定义基准值

原理：移动端页面一般是按照iphone6,7,8尺寸为初始尺寸开始制作的width：375px。而导入的flexible.js已经将我们的对象可见宽度分为了10份，每一份37.5px。且定义每一份为1rem。即有1rem=37.5px

定义基准值:在less文件夹里定义 @rootSzie : 37.5 rem; 直接使用测量的px值 /  37.5 就是 rem的值

例如width=100px,height=100px的盒子，写法为 width:(100/@rootSzie);  heigth:(100/@rootSzie);

六.less文件的导入和导出

less导入：@import './变量.less';     @import url(./变量.less);

less导出： // out: 路径/文件名; 例如：// out: ./css/            提示：  导出css路径

less禁止导出:  // out: false

第二部分 vw

一:vw的概念

(1）vw就是视口宽度，不管在什么屏幕下， 我们把屏幕分为平均的 100等份。每一份1vw。

(2）. vw 永远是以视口的宽度为准。· 在 375设计稿下， 1vw 永远是  3.75px

二：在less文件写法

有一个盒子  68px  *  29px ，则我们写代码 less  vw  ？

width: (68 / 3.75vw);

height: (29 / 3.75vw);

三.设置基准值 @vw ：3.75vw

第三部分 字体图标（2种）

第一种：Font class字体图标（写在类名里）

第二种：Unicode字体图标（写在标签中，类名里要写iconfont）

 

 Unicode伪元素使用字体图标

 

第四部分 属性

旋转：transform:rotate(deg)

位移：transform: translate（X,Y）

缩放：transform: scale(倍数);

背景渐变—角度： background-image: linear-gradient(90deg,  #f00  5%,  #00f  50%);

opacity透明属性   opacity: 1; 也可以写0（透明）

flex布局：

flex布局中子盒子宽度失效：flex-grow:0；为0时宽度不失效，默认值1。

（主轴）

从右往左对齐： justify-content:flex-end

水平居中： justify-content:center 

将主轴设置为垂直居中：flex-direction: column;

环绕（每个盒子中间距离一样）：justify-content:space-around

两边贴边,中间均分： justify-content:space-between     

（侧轴）

设置侧轴方向居中，侧轴是垂直方向：align-items: center;

终点方向依次排列：align-items: flex-end;

容易记不住的属性：（可记可不记）

想要子元素出现换行的效果，一定要给子元素设置宽高 flex-wrap: wrap;换行后实现居中效果align-content: center;

设置背景图片大小属性  background-size: 宽度 高度；contain背景图片等比例缩放、

在盒子内部滚动y轴，根据内容出现：overflow-y:auto;

网页字体图标：https://www.bilibili.com/favicon.ico

 让文字不换行：white-space:nowrap

continue : 结束本次循环 

break: 结束所有循环

console.log(Math.ceil(  ))；   向上取整

console.log(Math.floor(  ));   向下取整

onmouseenter 鼠标移入     

onmouseleave 鼠标移出