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

标题: WEB移动端rem布局-陈旭辉-20230427 [打印本页]

作者: 陌殇 时间: 2023-4-28 00:09
标题: WEB移动端rem布局-陈旭辉-20230427
一、学习内容

1.REM的基础
REM单位：rem（root em）是一个相对单位，类似于em，em是相对于父元素字体的大小、不同的是rem是相对于html元素的字体大小来定义的、比如：html元素设置的font-size的值是20px，那么2rem的对应的像素大小就是40px。
rem的优势：父元素的文字大小可能会不一致，一个元素也可能会有多个父级元素，但是整个页面只有一个html标签，所以我们可以通过改变html的字体大小，来控制整个页面的所有元素的尺寸。
2.媒体查询
媒体查询是可以帮助我们查询不同的屏幕宽度来进行相应的设置、使用@media 查询，可以针对不同的媒体类型来定义不同的样式、当我们重置浏览器的时候，页面会根据媒体查询来重新渲染页面、目前我们主要的媒体查询是针对移动端的：比如手机、平板等等。
语法规范：用@media 开头、mediatype 媒体类型、关键字 and not only、media feature 媒体特性，必须放在小括号中【@media mediatype and|not|only （media feature） { CSS的样式代码}】
3.LESS基础
LESS的介绍：它在原有的css的基础上增加了新的程序式语言的特性，比如：函数、变量、计算等等。常见的CSS的预处理器：Sass、Less、Stylus。
Less中的变量使用：变量是指没有固定的值，并且可以改变里面装的值。简单理解就是一个装具体值的一个盒子、@变量名: 值；
注意点：必须要以 @ 开头、不能包含特殊字符、不能以数字开头、大小写敏感（@Color 和@color 是两个变量）
4.REM适配方案
原理：让一些不能等比例自适应的元素，当设备的尺寸发生变化的时候，能够等比例进行适配、使用媒体查询根据不同的设备，设置不同的html的字体大小，然后页面用rem做尺寸单位，当html字体变化的时候，页面元素也会跟着变化
技术方案：less+rem+媒体查询、flexible.js+rem

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