|
一、今日学习内容： Rem单位 1、rem（root em）是一个相对单位，类似于em，但是em是相对于父元素的font-size字体大小来说的，rem是相对于html元素的字体大小来说的。 比如：html元素的字体大小是12px，那么width：2rem；换算成px就是24px 2、rem的优势：父元素的文字大小可以会有很多数值，基本不能保持统一，但是整个页面只有一个html元素，所以就可以很好的来控制整个页面的元素大小 媒体查询 1、媒体查询是CSS3新增的语法 使用 @media 查询，可以针对不同的媒体类型定义不同的样式 当我们重置浏览器大小的过程中，页面会根据浏览器的宽度和高度重新去渲染页面 @media 可以针对不同的屏幕尺寸来设置不同的样式 2、媒体查询的语法规范 用@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-code; } 3、书写规则 为了防止书写混乱，媒体查询一般都是按照从小到大的顺序来写的，这样可以让代码更加简洁 LESS基础 1、维护CSS的一些弊端 css是一门非程序式的语言，没有变量、函数、作用等概念 css需要书写大量看似没有逻辑的代码，冗余程度是非常高的 不方便维护以及拓展，也不利于代码复用 CSS没有很好的计算能力 对于前端工程师来说，不太容易写出组织良好而且方便维护的css代码项目 2、LESS介绍 Less（LeanerStyle Sheets）是一门CSS的扩展语言，也叫做CSS的预处理器。 作为CSS的扩展形势，它不仅没有减少CSS的功能，而且加入了一些程序式语言的特性。 LESS可以让我们用更少的代码来做更多的事情。 常见的CSS的预处理器：Less、Sass、Stylus。 总结：Less是CSS的预处理语言，扩展CSS的程序特性
REM实际开发适配方案1 1、假设设计稿是750px 2、假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份） 每一份作为html字体大小，这里就是50px 3、那么在320px设备的时候，字体大小为320/15就是 21.33px 4、用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的 5、比如我们以750为标准设计稿 一个100*100像素的页面元素在750屏幕下，就是100/ 50转换为rem是2rem*2rem比例是1比1 320屏幕下， html字体大小为21.33则2rem=42.66px此时宽和高都是42.66，但是宽和高的比例还是1比1 但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果 总结：页面元素的rem值 = 页面元素的px值 / html字体大小（屏幕的宽度/划分的份数）
REM实际开发适配方案2 1、实际方案 flexble.js +rem 手机淘宝团队出的简洁高效移动端适配库 我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理 它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。 我们要做的，就是确定好我们当前设备的html 文字大小就可以了 比如当前设计稿是 750px，那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以 里面页面元素rem值：页面元素的px值/75，剩余的，让flexible.js来去算 2、下载插件css rem 对默认字体大小进行设置 二、今日问题：无 三、解决方案：无
| 
