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

标题: 李虎跃-2022-11-25 [打印本页]

作者: 李维尼 时间: 2023-1-5 23:33
标题: 李虎跃-2022-11-25
今日学习内容：
rem布局
      Rem单位
            rem（root em）是一个相对单位，类似于em，但是em是相对于父元素的font-size字体大小来说的，rem是相对于html元素的字体大小来说的。
            rem的优势：父元素的文字大小可以会有很多数值，基本不能保持统一，但是整个页面只有一个html元素，所以就可以很好的来控制整个页面的元素大小
      媒体查询
            媒体查询是CSS3新增的语法
                     使用 @media 查询，可以针对不同的媒体类型定义不同的样式
                     当我们重置浏览器大小的过程中，页面会根据浏览器的宽度和高度重新去渲染页面
                     @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-code; }
      LESS基础
            维护CSS的一些弊端
                     css是一门非程序式的语言，没有变量、函数、作用等概念
                     css需要书写大量看似没有逻辑的代码，冗余程度是非常高的
                     不方便维护以及拓展，也不利于代码复用
                     CSS没有很好的计算能力
                     对于前端工程师来说，不太容易写出组织良好而且方便维护的css代码项目
            LESS介绍
                     Less（LeanerStyle Sheets）是一门CSS的扩展语言，也叫做CSS的预处理器。
                     作为CSS的扩展形势，它不仅没有减少CSS的功能，而且加入了一些程序式语言的特性
                     LESS可以让我们用更少的代码来做更多的事情。
                     常见的CSS的预处理器：Less、Sass、Stylus。
                     总结：Less是CSS的预处理语言，扩展CSS的程序特性
            LESS编译
                     我们使用easy less插件对less文件进行编译，编译完成后会自动生成一个css文件
            LESS嵌套
                     如果用到链接伪类，需要在伪类前加&符，否则链接伪类不起作用
            LESS运算
                     任何数字、颜色或者变量都可以参与运算，LESS为我们提供了加（+）减（-）乘（*）除（/）算术运算
                     注意点：

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