| rem布局 什么是rem rem（root em）是一个相对单位，与em不同的是rem相对于基准是对于html元素的字体大小来说的 比如 html设置的字体大小font-size：12px；非根元素设置的具体单位是width：2em，换算成px单位是24px 优点 父元素的字体大小可能不一致，但是整个页面只有一个html标签，可以很好的控制整个页面的元素大小 什么是媒体查询 什么是媒体查询 1、媒体查询是CSS3的新语法 2、使用@media来进行查询，可以针对不同的媒体类型定义不同的样式 3、也可以根据不通的屏幕尺寸设定不同的样式 媒体查询的语法规范 1、用@media来进行开头 2、mediatype媒体类型 1、all：用于所有设备 2、print：用于打印设备或打印预览 3、screen：用于电脑屏幕。平板电脑或手机等 3、关键字 and not only 1、and：相当于且的意思，将多个多媒体特性链接在一起 2、not：相当于非的意思，排除某个媒体类型 3、only：相当于只有的意思，指定某个特定媒体类型 4、media feature 媒体特性，在小括号中书写 1、width：定义输出设备中页面的可见区域宽度 2、min-width：定义输出设备中页面最小可见区域的宽度 3、max-width：定义输出设备中页面最大可见区域的宽度 5、@media mediatype and/not/only(media feature) {css-code} LESS 维护css的弊端 1、css是一门非程序式语言，没有变量、函数、作用域的概念 2、css书写时，会写大量的看似没有逻辑代码，冗余程度比较高 3、不方便扩展和复用 4、css没有恨到的计算能力 LESS介绍 less是一门css的扩展语言，也成为css预处理器 作为css的一种形式的扩展，它并没有减少css的功能，而且在现有的css语法上，为其增加了程序式语言的特性 常见的css预处理器 sass、less、stylus等 less编译 下载插件easy less将less文件编译为css文件 less嵌套 less的运算 任何的数字。颜色或者变量都可以参与运算 基本的运算符有：加+减-乘除/ 语法规范: 运算符左右两边，用空格隔开 对于两个不同的单位的值，之间的运算，运算结果取前面值的单位 对于两个参与计算的值，只有一个值有单位之间的运算，运算结果取有单位的单位 注意除法运算要加括号() REM的适配方案 less+rem+媒体查询 原理 让一些不能等比例自适应的元素，达到不同的尺寸时，根据html字体的大小变化来作为rem作为单位，控制元素进行自适应变化 rem的实际开发适配方案 ①假设设计稿是750px ②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份） ③每一份作为html字体大小，这里就是50px ④那么在320px设备的时候，字体大小为320/15就是 21.33px ⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的 ⑥比如我们以750为标准设计稿 ⑦一个100100像素的页面元素在 750屏幕下， 就是 100/ 50 转换为rem 是 2rem2rem 比例是1比1 ⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是42.66 但是宽和高的比例还是 1比1 ⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果 总结 公式:页面元的rem值=页面元素的px值/html的字体大小 html的字体大小=屏幕的宽度/划分的份数 flexible.js+rem flexble.js+rem适配方案 手机淘宝团队出的简洁高效 移动端适配库 我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理 它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。 我们要做的，就是确定好我们当前设备的html 文字大小就可以了 比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以 里面页面元素rem值： 页面元素的px 值 / 75 剩余的，让flexible.js来去算 下载css rem插件并且设置VScode的字体为75px（vscode的默认字体大小是16px，所以必须先进行设 |
| 欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/) | Powered by Discuz! X3.4 |