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

标题: 前端-毛少涵20221125 [打印本页]

作者: 微小星晨 时间: 2022-11-29 19:02
标题: 前端-毛少涵20221125

今日学习内容：

rem布局

Rem单位rem（root em）是一个相对单位rem是相对于html元素的字体大小来说的。 rem的优势：整个页面只有一个html元素，所以就可以很好的来控制整个页面的元素大小媒体查询媒体查询是CSS3新增的语法，使用 @media 查询，可以针对不同的媒体类型定义不同的样式当我们重置浏览器大小的过程中，页面会根据浏览器的宽度和高度重新去渲染页面

@media 可以针对不同的屏幕尺寸来设置不同的样式

媒体查询的语法规范 @media mediatype and|not|only (media feature) { CSS-code; }

用@media 开头

mediatype 媒体类型all 用于所有的设备print 用于打印机和打印预览

screen 用于电脑屏幕、平板电脑、智能手机等等设备

关键 and/not/only and

media feature 媒体特性必须放在小括号里面

width 定义输出设备中页面可见区域的宽度

min-width 定义输出设备中页面最小的可见区域宽度

max-width 定义输出设备中页面最大的可见区域宽度

复合写法@media mediatype and|not|only (media feature) { CSS-code; }

LESS基础

维护CSS的一些弊端 css是一门非程序式的语言，没有变量、函数、作用等概念

css需要书写大量看似没有逻辑的代码，冗余程度是非常高的

LESS介绍

Less（LeanerStyle Sheets）是一门CSS的扩展语言，也叫做CSS的预处理器。

作为CSS的扩展形势，它不仅没有减少CSS的功能，而且加入了一些程序式语言的特性LESS可以让我们用更少的代码来做更多的事情。

LESS编译我们使用easy less插件对less文件进行编译，编译完成后会自动生成一个css文件

LESS嵌套如果用到链接伪类，需要在伪类前加&符，否则链接伪类不起作用

LESS运算任何数字、颜色或者变量都可以参与运算，LESS为我们提供了加（+）减（-）乘（*）除（/）算术运算注意点：运算符中间左右要有空格隔开

如果参与运算的值有多个单位，那么就选择第一个有单位的值的单位

除法运算需要用括号括起来

REM实际开发适配方案

REM实际开发适配方案1

页面元素的rem值 = 页面元素的px值 / html字体大小（屏幕的宽度/划分的份数）

REM实际开发适配方案实际方案 flexble.js + rem

今日问题：无

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