web移动端四大布局-rem+less布局

本篇技术分为移动端四大布局之中的rem布局

---

前言

web移动端可以分为四大布局:
1.rem+less布局
2.flex弹性盒子布局
3.响应式布局
4.流式布局

---

一、什么是rem+less布局

rem+less布局,最核心的就是两点:
1.他可以做到移动适配
2.他的页面元素可以做到宽高等比缩放

二、布局的特性

1.原理

移动适配,简单的说就是屏幕宽度不同,网页元素尺寸不同(宽高等比缩放)

2.rem

Rem单位(长度单位) 相对单位,类似em,em是父元素字体大小 基准相对html元素文字大小 例如根元素font-size=12px,非根元素宽设置2rem,转换为px就是24px 1rem=1HTML字号 优点:可以通过修改html里面的文字大小来改变页面中元素大小可以整体控制

3.rem的作用

Rem作用以及元素

作用:
	移动适配(原理)
	屏幕宽度不同,网页元素尺寸不同(宽高等比缩放)
	简单的说:完成移动适配效果

将设计稿中的元素同比例显示到所有的移动设备

4.rem与px

	px属于绝对单位  rem是相对单位

5.rem的使用过程

使用rem过程

1.确定设计稿对应的设备的HTML标签字号  
  保证:不同的屏幕宽度,html字号不同   
  flexible.js(阿里开源)
  作用:将html字号设置为视口宽的十分之一
2.查看设计稿->确定参考设备宽度(视口宽度)->确定基准跟字号(1/10视口宽度)
3.为不同的移动设备设置不同的根字号
4.rem单位的尺寸=px单位数值/基准根字号
测量元素尺寸(px单位)->转化成rem单位(px单位值/基准根字号)

rem的注意事项:
1.先在css里面设置根标签变量
2.在将设计稿px/根标签变量=rem

// 准备变量,存HTML标签字号

@rootFontSize: 37.5 * 1rem;



// body

body {

  background-color: #f0f0f0;

}



//主体内容

.main {

  margin-bottom: (65 / @rootFontSize);

}

6.less的概念

Less概念:Less语法快速编译生成CSS代码

Less是一个CSS预处理器, Less文件后缀是.less
less不能直接引入,我们引入还是less生成的css文件,less是给程序员用的

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

7.less的作用

less用法:运算

	除法:width(68/37.5rem);
		不推荐:height:29 ./ 37.5rem
	加减乘除都可以,且是常用的方法

8.less的使用

1. vscode插件-easy less
   l 单行注释
   语法：// 注释内容
   快捷键：ctrl + /
   l 块注释
   语法：/* 注释内容 */
   快捷键： shift + alt + A
   单行注释没法自动生成到css
   但是多行注释可以的!
2. Less变量设置属性值,存储数据，方便使用和修改。例如：基准根字号。
   变量的作用就是用来储存数据的!
   程序员写代码其实最大的就是一定要复用,简单和便捷!
3. 语法：
   定义变量：@变量名: 值;
   使用变量：CSS属性：@变量名;
4. Less嵌套写法生成后代选择器
   快速生成后代选择器。
   父级选择器{
   子级选择器{}
   }

.box {

    /* 宽160 */

    width: (160/@fz);

    height: 4.267rem;

    background-color: purple;

    p{

        font-size: 12px;

    }

}

&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

6. Less导入写法引用其他Less文件
   导入: 独立Less文件间相互引用, 可以省略.less后缀
   @import “路径”;
7. Less语法导出CSS文件
   在工作中，是所有的Less文件都要导出CSS文件吗？

/* 

不是,工作中css文件较多,为了简化,将一些不必要的less文件设置不进行自动转化(不必要的文字/颜色等)



 1.专门存储变量的Less文件



 2.初始化的less文件

*/

	 配置插件，控制全局： 设置
		在less文件中设置
			 禁止导出

在less文件第一行添加: // out:false
控制当前less导出路径
添加:// out:路径/
例如://out: ./132/
在easy less的settings.json中设置
控制所有less的导出路径
“out”:“路径”
json中的代码都是""
8. Less混合写法快速复用代码

定义了公共选择器,谁都可以用

混合: 将代码打包到一起, 提高复用性
	1.定义(与其类名基本相同)

2…,类名();

// 定义以及使用

// 1.定义

.borders{

    border-top: 1px solid red;

    border-bottom: 1px solid red;

}

// 2.使用

.box1 {

  .borders();

}

.box2 {

  .borders();

}

10. less混合高级
    我们都需要上边框和下边框,但是粗细不一样
    咋写?
    定义一个边框粗细的变量
    在使用混合的时候,直接将
    变量作为实参和形参传进去

	// 1.先设置一个变量

@bdwidth: 1px;

@bd2:2px;

//  混合写法

.borders(@a) {

  border-top: @a solid red;

  border-bottom: 1px solid red;

}

// 2.使用

.box1 {

  .borders(@bdwidth);

}

.box2 {

  .borders(@bd2);

}

---

总结和补充

技术是不断发展和进步的,我们以后可能会遇到以下两种类型的单位,但是只是作为了解来用,因为下面的单位,现在的技术可能还有办法将他的兼容性做到很好.

vw
viewport width
视口宽度
1vw=1/100视口宽度

vh
viewport height
视口高度
1vh=1/100视口高度