移动WEB-rem布局篇

1. 概述

rem布局主要的作用就是：根据屏幕的大小的不同，改变盒子的高度和文字的大小

2 rem单位

1. rem 和 em 类似，都是相对单位
2. em 相对的是父元素的字体大小
3. rem 相对的是html 根元素的字体大小

3. 媒体查询

3.1 什么是媒体查询：

1. 媒体查询（Media Query）是CSS3的新语法
2. 使用 @media 查询，可以针对不同的媒体类型定义不同的样式
3. @media 可以针对不同的屏幕尺寸设置不同的样式
4. 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
5. 目前针对很多苹果手机、Android手机、平板等设备都用的到多媒体查询

3.2 语法规范：

	@media mediatype 关键字 （media feature）{
   }

1. 用 @media 开头
2. mediatype 媒体查询取值：
        all 用于所有设备
        print 用于打印机和打印预览
        scree 用于电脑屏幕、平板电脑，智能手机
3. 关键字（关键字将媒体类型或多个媒体特性连接到一起，作为媒体查询条件）
        and 可以将多个媒体特性连接在一起，相当于并且的意思
        not 排除某个媒体类型，相当于非的意思，可以省略
        only指定某个特定的媒体类型，可以省略
4. media feature 媒体特性 必须有小括号包含，取值：
        width 定义输出设备中页面可见区域的宽度
        min-width 定义输出设备中页面最小可见区域宽度
        max-width 定义输出页面中页面最大可见区域宽度
        （暂时了解三个）

示例：

	@media screen and (max-width:800px) {
   
		body {
   
			background-color:pink; /*在我们屏幕上 并且 最大宽度是 800像素（小于或等于800），设置我们想要的样式*/
		}
	}

3.3 rem单位 + 媒体查询，实现rem布局

1. 使用媒体查询实现不同的屏幕大小，设置不同的html标签的字体大小
2. 把需要根据屏幕大小改变大小的，盒子或字体的单位设置为rem

3.4 使用媒体查询判断，引入不同CSS资源

1. 语法规范：<link rel="stylesheet" href="./a.css" media="mediatype and|not|only (media feature)">

示例：

	/*根据不同的屏幕尺寸引进不同的css文件*/
	<link rel="stylesheet" href="style100.css" media="screen and (min-width:320px)">
    <link rel="stylesheet" href="style50.css" media="screen and (min-width:540px)">

4. Less基础

4.1 CSS的弊端

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

4.2 Less介绍

1. Less 是一门 CSS 扩展语言，也称为 CSS预处理器
2. 作为CSS的一种形式的扩展，它并没有较少CSS的功能，而是在现有的CSS语法上，为CSS加入了程序式语言的特性<