菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 邹润英_前端_221125 [打印本页]

作者: 我想 时间: 2022-11-25 21:21
标题: 邹润英_前端_221125
一.今日学习：rem布局：rem单位：rem（root em）是一个相对单位，类似于em。但是em相对于父元素的font-size字体大小来说的，rem是相对于html元素的字体来说的。
                   rem的优势：父元素的文字大小可以有很多的数值，基本不能保持统一，但是整个页面只有一个html元素，所以可以很好的控制整个页面的元素大小。
                  媒体查询：使用@media查询，可以针对不同的媒体类型定义不同的样式。当我么重置浏览器大小的过程中，页面会更具浏览器的宽高重新去渲染页面。他可以针对不同的屏幕尺寸来设置不同的样式。
               用@media开头
               mediatype媒体类型（all用于所有设备，scree用于移动端和pc端电子设备）
               关键and/not/only（and将多个媒体特性连接到一起，相当于且。not排除某个媒体类型，相当于非的意思。only指定某个特定的媒体类型。）
               media feature媒体特性必须放在小括号里（width定义输出设备中页面可见区域宽度）
            @media mediatype and/not/only {media feature}{css code；}
                  LESS基础：维护css的一些弊端：css是一门非程序类的语言，没有变量也没有函数。css的冗余度是非常高的。不方便维护也不利于代码复用。
                  LESS介绍：是css的拓展语言也叫作css的预处理器。作为css的扩展属性，他不仅没有减少css的功能而且加入了一些程序式语言的特性。less可以让我们用更少的代码做更多的事情。
            常见的css预处理器：less、sass、stylus。
                                             总结：less是css的预处理语言，扩展了css的程序特性
                  LESS编译：使用easyless插件对less文件进行编译，编译完成后会自动生成一个css文件。
               LESS运算：任何数字、颜色或者变量都可以参与运算，less为我们提供了加减乘除运算。
                              注意：运算符中间要有空格隔开。如果参与运算的值由多个单位，那么就选择第一个单位的单位来计算。
               rem计算公式：页面元素的rem值=页面元素的px值/html的字体大小（屏幕宽度/划分的份数）

二.今日问题：无.

三.解决方案：无。

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)