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

标题: 赵强-20221026-移动端rem布局 [打印本页]

作者: BlueFlame 时间: 2022-10-27 00:42
标题: 赵强-20221026-移动端rem布局
今日所学内容:rem布局
什么是rem
   rem(root em)是一个相对单位，和em不同的是rem相对基准是对于html元素的字体元素大小来说的
   比如：
html设置的字体大小font-size：12px;非根元素的具体的单位是width：2rem;换算成px单位就是24px
   优点：

什么是媒体查询
   媒体查询是css3的新语法
   使用@media来进行查询，可以针对不同的媒体类型定义不同的样式
   也可以根据不同的屏幕尺寸来设定不同的样式
媒体查询的语法规范
   用@media来进行开头
   mediatype媒体类型
all:用于所有设备
print：用于打印设备或者打印预览
screen：用于电脑屏幕、拼版电脑或者手机等
   关键字 and not only
and:相当与且的意思，将多个媒体特性连接在一起
not:相当于非得意思，排除某个媒体类型
   media feature 媒体特性，在小括号中书写
   @media mediatype and/not/only (media feature) (css-code);
LESS
   维护css的弊端：
css是一门非程序式的语言、没有变量、函数、作用域的概念
css书写的时候会写大量的看似没有逻辑代码，冗余程度比较高
不方便扩展和复用
css没有很好的计算能力
   Less介绍
less是一门css扩展语言，也称为css预处理
作为css的一种形式的扩展，他并没有减少css的功能，而且在现有的css语法上，为其增加了程序式语言的特性
常见的css预处理器：
         Sass、Less、Stylus等等
   Less的编译
下载插件Easy Less将less文件编译
   Less的嵌套

   Less的运算
任何的数字、颜色或者变量都可以参与运算
基本的运算有：（+）、（-）、（*）、（/）
语法规范：
      运算符左右两边要有空格运算隔开
      除法运算时要用括号括住
         对于两个不用的单位的值之间的元素，运算结果取前面的值的单位
      如果两个参与计算的数值，只有一个值有单位，那么就用有单位值的单位
REM的适配方案
   less+rem+媒体查询
         原理：
让一些不能等比例自适应的元素，达到不同尺寸时，根据html字体大小变化来用rem作为单位，控制元素进行自适应变化。
         rem的实际开发适配方案

         总结：
公式：页面元素的rem值=页面元素的px值/html的字体大小
            html的字体大小=屏幕的宽度/划分的份数

   flexible.js+rem

手机淘宝团队出的简洁高效移动端适配库
我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
我们要做的，就是确定好我们当前设备的html 文字大小就可以了
比如当前设计稿是 750px，那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以
里面页面元素rem值：页面元素的px 值 / 75 剩余的，让flexible.js来去算

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