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

标题: 薛伯一-20221026-流式和flex布局 [打印本页]

作者: Paracelsus 时间: 2022-10-27 01:02
标题: 薛伯一-20221026-流式和flex布局

: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的字体大小=屏幕的宽度/划分的份数

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