| 一、学习内容 REM的基础 REM单位 rem（root em）是一个相对单位，类似于em，em是相对于父元素字体的大小 不同的是rem是相对于html元素的字体大小来定义的 比如：html元素设置的font-size的值是20px，那么2rem的对应的像素大小就是40px rem的优势：父元素的文字大小可能会不一致，一个元素也可能会有多个父级元素，但是整个页面只有一个html标签，所以我们可以通过改变html的字体大小，来控制整个页面的所有元素的尺寸。 媒体查询 什么是媒体查询 媒体查询是可以帮助我们查询不同的屏幕宽度来进行相应的设置 使用@media 查询，可以针对不同的媒体类型来定义不同的样式 当我们重置浏览器的时候，页面会根据媒体查询来重新渲染页面 目前我们主要的媒体查询是针对移动端的：比如手机、平板等等。 媒体查询的语法规范 用@media 开头 mediatype 媒体类型 all 用于所有设备 print 用于打印设备和打印预览 screen 用于电脑屏幕、平板、手机等等（主要使用这个类型） 关键字 and not only and 可以将多个媒体特性连接起来，相当于且的意思 not 排除某个媒体类型，相当于非的意思，可以省略 only 指定某个特定的媒体类型 可以省略 media feature 媒体特性，必须放在小括号中 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域 max-width 定义输出设备中页面最大可见区域 @media mediatype and|not|only （media feature） { CSS的样式代码} LESS基础 CSS的弊端 CSS是一门非程序式的语言，没有变量、函数、作用域等概念 CSS需要书写大量的没有逻辑的代码，CSS的冗余程度是比较高的 CSS没有很好的计算能力 如果是没有很多经验的工程师比较难写出易于维护的CSS代码的 Less的介绍 LESS（leanerStyle Sheets的缩写），是一门CSS的扩展语言，也称为CSS的预处理器。、 它在原有的css的基础上增加了新的程序式语言的特性，比如：函数、变量、计算等等。 常见的CSS的预处理器：Sass、Less、Stylus。 Less中的变量使用 变量是指没有固定的值，并且可以改变里面装的值。简单理解就是一个装具体值的一个盒子 @变量名: 值； 注意点： 必须要以 @ 开头 不能包含特殊字符 不能以数字开头 大小写敏感（@Color 和@color 是两个变量） Less的编译 下载编译插件 easy less 创建less文件 书写代码后保存会自动生成css文件 Less运算 任何的数字、颜色或者变量都可以参与计算，less为我们提供了加(+)、减(-)、乘(*)、除(/)算术运算。 注意点： 除法必须要加括号 运算符的左右两边要用空格隔开 1px + 50 如果多个值参与计算，最终的单位选择最先出现单位的这个值的单位。 REM适配方案 原理 让一些不能等比例自适应的元素，当设备的尺寸发生变化的时候，能够等比例进行适配 使用媒体查询根据不同的设备，设置不同的html的字体大小，然后页面用rem做尺寸单位，当html字体变化的时候，页面元素也会跟着变化 技术方案 less+rem+媒体查询 flexible.js+rem 方案一 假设设计稿是750px 假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份） 每一份作为html字体大小，这里就是50px 那么在320px设备的时候，字体大小为320/15就是 21.33px 用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的 比如我们以750px宽度为标准设计稿 一个100*100像素的页面元素在 750屏幕下， 就是 100/ 50 转换为rem 是 2rem*2rem 比例是1比1 320屏幕下， html字体大小为21.33px 则 2rem= 42.66px 此时宽和高都是42.66 但是宽和高的比例还是 1比1 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果 总结 1、页面元素的rem值 = 页面元素的px值 / html的font-size的大小 2、html的font-size大小 = 屏幕宽度 / 划分的份数 方案二 手机淘宝团队出的简洁高效 移动端适配库 我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理 它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。 我们要做的，就是确定好我们当前设备的html 文字大小就可以了 比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以 里面页面元素rem值： 页面元素的px 值 / 75 剩余的，让flexible.js来去算 下载css rem插件，并且改变默认字体为75px |
| 欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/) | Powered by Discuz! X3.4 |