Web移动前端开发-——rem布局基础

rem布局

rem 主要是为了解决字体随屏幕变化，flex上的高度问题，实现高度和宽度等比例缩放

rem其实是一个单位，

是个相对单位 root em。类似em。em指的是父级字体大小，顾名思义，我们的rem就是root（根元素的大小）->根元素，相对于html元素的字体大小的单位。

rem布局的原理，就是根据一个html根元素来控制，网页的布局，实现类似于自适应等比例的缩放的布局。
rem优势，通过修改html文字的大小，来改变页面中元素的大小，实现了页面的整体控制

        html {
            font-size: 12px;
        }
        
        div {
            font-size: 12px;
             15rem;
            height: 15rem;
            background-color: purple;
        }
        
        p {
            /* 1. em相对于父元素 的字体大小来说的 */
            /*  10em;
            height: 10em; */
            /* 2. rem 相对于 html元素 字体大小来说的 */
             10rem;
            height: 10rem;
            background-color: pink;
            /* 3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制 */
        }

媒体查询

Media query是css3的语法，实现了针对不同屏幕尺寸设置了不同的样式，（@media）

@media mediatype and|not|only (media feature) {
CSS-Code;
}/我们通过下面的代码来实际的体会以下，其中的奥妙

特别需要强调！！！经验之谈；一个建议：我们媒体查询最好的方法是从小到大

/* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */
        /*
            @media mediatype and|not|only (media feature) {
               CSS-Code;
            }
            mediatype是指媒体的类型，有三个值，最常用的就是screen意为 在屏幕上
            and（可以将多个媒体特性连接到一起‘且’），ont（排除某个媒体类型‘非’），only，媒体特性
        */
        /*先看我们的需求：我们需要睡着屏幕的大小 变化，来展示不同的样式。
        
        具体就是，540下的是蓝色，540-970之间是绿色。970以上的是红色*/
        /* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
        /* 2. 小于540px 页面的背景颜色变为蓝色 */
        
        @media screen and (max- 539px) {
            body {
                background-color: blue;
            }
        }
        /* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
        /* @media screen and (min- 540px) and (max- 969px) {
            body {
                background-color: green;
            }
        } */
        
        @media screen and (min- 540px) {
            body {
                background-color: green;
            }
        }
        /* 4. 大于等于970 我们页面的颜色改为 红色 */
        
        @media screen and (min- 970px) {
            body {
                background-color: red;
            }
        }
        /* 5. screen 还有 and 必须带上不能省略的 */
        /* 6. 我们的数字后面必须跟单位  970px   这个 px 不能省略的 */

结合rem + media query

结合媒体查询和rem我们可以实现更人性化的页面。

        * {
            margin: 0;
            padding: 0;
        }
        /* html {
            font-size: 100px;
        } */
        /* 从小到大的顺序 */
        
        @media screen and (min- 320px) {
            html {
                font-size: 50px;
            }
            
        }
        
        @media screen and (min- 640px) {
            html {
                font-size: 100px;
            }
        }
        
        .top {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }

这里又有一个问题了，到底给元素多大的rem呢？

比如说这里有这样的一个需求：html大小写定了就是50px，设计图原稿的图片是82*82的，那么你给多大的rem给img呢？
解决：82/50 = 需要的rem

媒体查询--引入资源

主要是意思就是，给不同的屏幕情况指定引入不同的css样式

意识就是一套一套的css

<link rel="stylesheet" href="style320.css" media="screen and (min- 320px)">

    <link rel="stylesheet" href="style640.css" media="screen and (min- 640px)">

less & sass

注意一下，这里的less和sass都是扩展了css东西，less是一种动态样式语言，对css赋予了动态语言的特性，比如变量、继承、运算、函数，既可以运行在客户端，也可以运行在服务器端，依赖JavaScript

sass是一种动态语言，属于缩排语法，比css多出很多功能，比如变量、嵌套、运算、混入、继承、函数等，更容易阅读；

它的出现解决了之前的需要计算rem的繁琐问题

less

css的扩展语言，也叫作css预处理器。
注意一下，要使用他们需要安装node，安装之后，通过npm来安装less ，sass也是一样的操作，注意，安装的时候需要旋转，全局安装-g
在vs里面新建一个xxx.less文件

以下的是less使用流程

// 定义一个粉色的变量
@color: pink;  
// 错误的变量名  @1color   @color~@#
// 变量名区分大小写  @color  和  @Color 是两个不同的变量
// 定义了一个 字体为14像素的变量
@font14: 14px;
body {
   background-color: @color;
}
div {
   color: @color;
   font-size: @font14;
}
a {
   font-size: @font14;
}

以上的代码保存在xxx.less中

你需要编译less文件，把它转化成css之后，生成xxx.less（同名css文件），页面才能正常的引入使用

编译器插件（vs中）Easy LESS

写完les之后，并且确保你安装了less和编译器，ctrl+s一下就能自动在目录生成同名的css文件了

关于更多的less语法，请你点击这里less官网

/*最常见的语法就是，变量，嵌套子元素样式，运算。

其他的都比较好理解，就是有一个需要特别小心的地方，就是选择器*/
/*如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接*/
.header {
     200px;
    height: 200px;
    background-color: pink;
    // 1. less嵌套 子元素的样式直接写到父元素里面就好了，
    a {
        color: red;
        // 2. 如果有伪类、交集选择器、 伪元素选择器 我们内层选择器的前面需要加&
        // 如果你不写，less默认就是全部都后代选择器
        &:hover {
            color: blue;
        }
      }
    } 
    .nav {
    .logo {
        color: green;
          }
    &::before {
        content: "";
              }
    }

关于我们的运算，跟数学中的四则运算是一样一样的。但是你需要注意：

// 1. 我们运算符的左右两侧必须敲一个空格隔开
// 2. 两个数参与运算  如果只有一个数有单位，则最后的结果就以这个单位为准
// 3. 两个数参与运算，如果2个数都有单位，而且不一样的单位 最后的结果以第一个单位为准