移动布局之rem适配布局、Bootstrap前端开发框架

   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
  致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨

---

目录

一、LESS

二、移动布局之rem适配布局

三、Bootstrap前端开发框架

四、每日面试题

---

一、LESS

在这之前先讲讲维护CSS的弊端：

1.CSS是一门非程序语言，没有变量、函数、作用域等概念
2.CSS需要书写大量看似没有逻辑的代码，冗余度较高
3.不方便维护及扩展，不利于复用，css没有很好的计算能力
4.非前端开发工程师来讲，往往会因缺少css编写经验而很难写出组织良好且易于维护的css代码像蘑菇

回到less，没错less就是可以弥补css的不足
ess介绍：
Less是一门CSS扩展语言，也成为CSS预处理器，常见的CSS预处理器：Sass、Less、Stylus

Less（Leaner Style Sheets的缩写），作为CSS的一种形式的扩展，没有减少CSS的功能，在现有css语法上，为css加入程序式语言的特性。

在CSS的语法基础上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，Less可以让我们用更少的到吗去做更多的事情。

Less中文网址：http://lesscss.cn/

less安装：

1. 安装nodejs，网址：http://nodejs.cn/download/
2. 检查是否安装成功，使用cmd命令输入" node-v " 可查看版本即可
3. 给予nodejs在线安装Less，使用cmd命令" npm install -g less "
4. 检查是否安装成功，使用cmd命令" lessc -v " 查看版本

VScode安装easy-less插件，保存实现less自动生成css文件

less使用：
Less变量：@变量名：值； 变量命名规范，必须以@开头、不能包含特殊字符、不能以数字开头、大小写敏感

Less编译：本质上，less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，规则最终会通过解析器编译生成对应的css文件
用easy-less插件把less文件编译为css文件，只要保存less文件就会自动生成css文件
Less嵌套：Less嵌套子元素的样式直接写到父元素里就好了

如果遇见（交集、伪类、伪元素选择器）：
1.内层选择器的前面没有&符号，则他被解析为父选择器的后代
2.如果有&符号，他就被解析为父元素自身或父元素的伪类
3.也就是说如果有伪类、交集、伪元素选择器，在内层选择器前面加上&
less运算：任何数字、颜色或者变量都可以参与运算，less提供了加 + 减 - 乘 * 除/ 算数运算
运算符两侧必须加空格
参与运算的两个数如果只有一个有单位，则结果就以这个单位为准
参与运算的数都有单位且不一样，结果以第一个单位为准

---

二、移动布局之rem适配布局

一、rem基础
rem(root em)是一个相对单位，类似于em
rem是相对于HTML元素的字体大小
em是相对于父元素的字体大小来说的
rem的优点是可以通过修改HTML里的文字大小改变页面中元素的大小可以整体控制

rem适配方案：
让一些不能等比自适应的元素，达到当设备尺寸发生变化时，等比例适配当前设备

使用媒体查询根据不同设备按比例设置HTML字体大小，然后页面元素使用rem做尺寸单位，当HTML字体大小变化与水泥素尺寸也会发生变化，达到等比缩放适配

按照设计稿与设备宽度的比例，动态计算并设置HTML根标签的fong-size大小（媒体查询）；
CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值

二、媒体查询
媒体查询（MediaQuery）是css3新语法
@media 可以针对不同的屏幕尺寸设置不同的样式；
可以针对不同的媒体类型定义不同的样式；
当重置浏览器大小的过程中，页面会根据浏览器的宽度和高度重新渲染页面；
语法规范：

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

mediatype 媒体类型
and、not、only 关键字
media feature 媒体特性，必须有小括号

• 媒体类型：all 用于所有设备
  print 用于打印机和打印预览
  scree 用于电脑屏幕、平板、手机等
• 关键字：and 可将多个媒体特性链接到一起
  not 排除某个媒体类型，可省略
  only 指定某个特定的媒体类型，可省
• 媒体特性：width 定义输出设备中页面可见区域的宽度
  min-width 定义输出设备中页面最小可见区域宽度
  max-width 定义输出设备中页面最大可见区域宽度

/*例：*/
@media scree and （max-width：100px） {
    body {
                 css
      }
}

引入资源：当样式比较繁多时，可以针对不同的媒体使用不同的stylesheets，直接在link中判断设备尺寸，然后引入不同的css文件

语法：

"stylesheet" media="mediatype and | not |only (media feature)" href=".css"

响应式布局：
原理：就是使用媒体查询针对不同宽度的 设备和样式的设置，从而适配不同设备的目的
响应式布局需要一个父级作为布局容器，来配合子级元素来实现变化效果，就是在不同屏幕下通过媒体查询来改变这个布局容器大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化

响应式工具：

与之相反的，是visible-xs visible-sm visible-md visible-lg 是显示某个页面的内容

三、市场主流技术

一、less+媒体查询+rem

二、flexible.js+rem（推荐）

引入js文件：

VScode安装cssrem插件，实现px转rem，此插件默认HTML字体大小为16px，其他大小需修改

三、Bootstrap前端开发框架

框架：就是一套架构，有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发

基于HTML、CSS、JAVASCRIPT的，简介灵活，使web开发更快捷
优点：标准化的HTML+css编码规范、提供了一套简介、直观、强悍的组件、有自己的生态圈，不断地更新迭代、让开发更简单，提高开发效率

中文官网：http://www.bootcss.com/
官网：http://getbootstrap.com/
推荐使用：http://bootstrap.css88com/
版本：
使用：控制权在框架本身，使用者要按照框架所规定的某种规范进行开发
使用四部曲：
1.创建文件夹结构、
2.创建HTML骨架结构、
3.引入相关样式文件、
4.书写内容

布局容器：Bootstrap需要为页面内容和栅格系统包裹一个 .container容器，Bootstrap预先定义好了这个类，叫 .container，他提供了两个作此用处的类

1、.container类，响应式布局的容器，固定宽度

栅格系统，他指将页面布局划分为等宽的列，通过列数的定义来模块化页面布局；

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列；

Bootstrap里面container宽度是固定的，但是不同屏幕下container的宽度不同，再把container分为12分

注意：

列嵌套：栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列，可以通过添加一个新的 .row 元素和一系列 .col-sm-元素到已存在的 .col-sm- 元素内

列嵌套最好加1个行row，这样可以取消父元素的padding值，而且高度自动和父级一样高

列偏移：使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin），以实现居中或右看齐等，偏移的距离就是份数

列排序：使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列的顺序

2、container-fluid类，流式布局容器，百分百宽度，占据全部视口的容器，适合做单独移动端开发

四、面试题

一、基本数据类型和引用数据类型有什么区别？
（1）两者作为函数的参数进行传递时：
基本数据类型传入的是数据的副本，原数据的更改不会影响传入后的数据。
引用数据类型传入的是数据的引用地址，原数据的更改会影响传入后的数据。
（2）两者在内存中的存储位置：
基本数据类型存储在栈中。
引用数据类型在栈中存储了指针，该指针指向的数据实体存储在堆中。

二、判断数据类型的方法有哪些？
（1）利用typeof可以判断数据的类型；
（2）A instanceof B可以用来判断A是否为B的实例，但它不能检测 null 和 undefined；
（3）B.constructor == A可以判断A是否为B的原型，但constructor检测 Object与instanceof不一样，还可以处理基本数据类型的检测。
不过函数的 constructor 是不稳定的，这个主要体现在把类的原型进行重写，在重写的过程中很有可能出现把之前的constructor给覆盖了，这样检测出来的结果就是不准确的。
（4）Object.prototype.toString.call()
Object.prototype.toString.call() 是最准确最常用的方式。

---

本期到这里就结束了，感谢阅读！有问题留言，及时回复

---

• 本期相关案例获取：公众号回复：移动布局之rem适配布局、Bootstrap前端开发框架案例，或戳->案例下载
• 点赞加关注，持续更新实用技巧、热门资源、软件教程等
• 有任何 软件 影视 教程资源 考证资料等需求留言即可