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

标题: 王文博-20221026-移动端rem [打印本页]

作者: 博5237 时间: 2022-10-27 08:49
标题: 王文博-20221026-移动端rem
一、今日学习内容
web移动端REM布局
什么是rem
rem（root em）：是一个相对单位，和em不同的是rem相对基准是对于html元素的字体大小来说的
比如：html设置的字体大小font-size:12px;非跟元素设置的具体单位是width:2rem;换算成px单位就是24px
优点：父元素的字体大小，可能不一致，但是整个页面只有一个html标签，可以很好地和控制整个页面的元素大小
rem和em的区别：
rem是相当于html页的字体单位，默认16px；em是相当于父级设置的字体大小。
媒体查询
什么是媒体查询
媒体查询是css的新语法
使用@media来进行查询，可以针对不同的媒体类型定义不同的样式
也可以根据不同的屏幕尺寸来设置不同的样式
媒体查询的语法规范
用@media来进行开头
mediatype媒体类型
all：用于所有设备
print：用于打印机设备或者打印预览
screen：用于电脑屏幕，平板电脑或者手机等
关键字and not only
and：相当于且的意思，将多个媒体特性连接在一起
not：相当于非的意思，排除某个媒体类型（可以省略）
screen：相当于只有的意思，指定某个特性媒体类型（可省略）
media feature媒体特性，再小括号中书写
width：定义输出设备页面可见区域的宽度
min-width：定义输出设备页面最小可见区域的宽度
max-width：定义输出设备页面最大可见区域的宽度
@media mediatype and/not/only（media feature）{css-code}
LESS
维护css弊端
css是一门非程序语言，没有变量、函数、作用于的概念
css书写的时候会写大量的看似没有逻辑代码，冗余程度比较高
不方便扩展和复用
css没有很好的计算能力
Less介绍
less是一门css的扩展语言，也称为css预处理器
作为css的一种形式的扩展，他并没有减少css的功能，而且在现有语法上，为其增加了程序式语言的特性
常见的css预处理器
sass、less、stylus等等
less的编译
下载插件easy less 将less文件编译为css文件
less嵌套
父级套子级，伪类加&符号
less的运算
任何数字、颜色或者变量都可以参与运算
基本的运算符有：加（+）、减（-）、乘（*）、除（/）
语法规范：
运算符左右两边，要有空格隔开
对于两个不同的单位之间的运算，运算结果取
除法的话需要加括号
如果两个不同单位的话，运算结果取前面值的单位
如果两个参与计算的数值，只有一个值有单位的话，那么单位就是有单位的那个单位
REM的适配方案
less+rem+媒体查询
原理：
让一些不能等比例自适应的元素，达到不同的尺寸是，跟据html的字体尺寸的大小变化来用rem作为单位，控制元素进行自适应变化
rem的实际开发适配方案
总结：
公式：页面元素的rem值=页面元素的px值/html的字体大小
html的字体大小=屏幕的宽度/划分的份数

flexible.js+rem
下载css rem插件并且设置VSCode的字体为75px，（VSCode的默认字体大小是16px，所以必须先进行设置）
导入flexible.js文件
<script src="./js/flexible.js></script>

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