移动端适配-03-rem

1:流式布局:
    1:最外盒子宽度设置:min-width & max-widht width=100%  margin-auto
    2:内容盒子宽度设置:50%;
2:flex布局:
    1:最外盒子宽度设置:min-width & max-width margin-auto
    2:内容盒子宽度设置:
        parent:display:flex;
        son:flex:1;
3;rem布局
    1:最外层盒子宽度设置:min-width & width=15rem margin:auto
    2:content box width setting:width:n rem;

4:px/em/rem
    1:px:像素
    2:em:父元素文字大小(相对于父元素)
        parent:font-size:12;
        son:width:10em;
    3:rem:(现对于root(html))root em,是一个相对单位,类似于em,em是父元素字体大小;
        不同是rem的基准是相对于html元素的字体大小;
        for example:根元素html,设置font-size:12px;非根元素设置width:2rem,换算成px则表示24px;

5:媒体查询:
    @media screen and(min-width:320px){CSS-Code}

6:
    <link rel="stylesheet" media="sceen and (min-width:320px)" href="css/css320.css">
    <link rel="stylesheet" media="sceen and (min-width:640px)" href="css/css640.css">

7:less变量:
    @变量名:value;
    less嵌套(子元素直接写到父元素里面即可),伪类,伪元素,加&符号

8:细节注意点:
        6;实现方式:
            1:假设设计稿为750;
            2:假设将屏幕划分为15等分;
            3:每一份作为html字体的大小:
                750情况下:50px
                320情况下:21.33px
            4:配合媒体查询获取浏览器的宽度,更改html font-size
            5:实现等比例缩放效果;
                font-size=浏览器宽度/份数
                rem值=盒子的宽度/font-size;
        7:设置公共的common.less文件:
            1:新建common.less文件,设置好常见的屏幕尺寸,使用媒体查询设置不同的html字体;
            2:常见屏幕尺寸:320px,360px,375px,400px,414px,424px,480px,540px,720px,750px
            3:划分的份数定为15份
            4:pc端也可以打开移动端首页,所以默认html字体大小为50px,这句话写在最上面
        8:知识点:
            1;引入less文件:
                @import "common.less";
            2:宽度设置两种思路:
                1:width=100%;
                2:width=15rem;
                3:max-width=750px
            3:固定定位必须有宽度
            4:使用:
                font-size: (15rem / 50);
                width:88rem / 50 ;
                heigh:100rem /50 ;
            5:所有的样式都得在less文件中写

9:rem+flexiable.js(推荐)
    1:将屏幕划分成10等分;
    2:剩下的让flexible.js去处理;
    3:使用:
        npm i -S amfe-flexible
        <script src="./node_modules/amfe-flexible/index.js"></script>
    4:宽度设置:
        width: 10rem;
        min-width: 320px;
        max-width: 750px;
    5:cssrem插件下载:
        自动将px转换成rem;
        这个插件的默认的rem大小,为html的默认font-size(16px);
    6:command+",",输入cssroot将16改为75;(需要手动修改)
    7:如果我们的屏幕超过750px,则我们就按750px来走
        @media screen and (min-width:750px) {
            html {
                font-size: 75px !important;(因为js优先级要比css高,所以,这里要提权)
            }
        }

rem布局:
    目标:
        1:使用rem单位;
        2:使用媒体查询的基本语法
        3:使用less基本语法
        4:使用less嵌套
        5:使用两种rem适配方案
        6:完成苏宁客户端
    学习目录:
        1:rem基础;
        2:媒体查询
        3:less基础
        4:rem适配方案
        5:suning案例制作
    方案?
        1:流式布局和flex布局中的文字能否随着屏幕的放大而放大?
        2:流式和flex布局主要针对宽度布局,高度如何设置?
        3:怎么样让屏幕等比缩放的时候元素的高度和宽度等比缩放?
    rem适配方案为了解决宽高等比缩放问题:

    1:rem单位:
        1:px/em/rem
            1:px:像素
            2:em:父元素文字大小(相对于父元素)
                parent:font-size:12;
                son:width:10em;
            3:rem:(现对于root(html))root em,是一个相对单位,类似于em,em是父元素字体大小;
                不同是rem的基准是相对于html元素的字体大小;
                for example:根元素html,设置font-size:12px;非根元素设置width:2rem,换算成px则表示24px;

    2:媒体查询:
        1:定义:media query(css3的新语法)
        2:作用:    
            1:@media可以针对不同的屏幕尺寸设置不同的样式;
            2:当重置浏览器大小时,页面会根据浏览器的大小重新渲染界面;
            3:ios,android,平板设备都会用到media query;
        3:语法介绍:
            @media mediatype and|not|only(media feature){CSS-Code}
            1:mediatype:
                1:all:所有设备
                2:print:打印机设备
                3:screen:电脑屏幕,平板电脑,智能手机
            2:keyword:
                and:将多个媒体特性连接在一起
                not:排除某个媒体特性
                only:指定特定的媒体特性

            3:media feature(媒体特性)
                1:width:定义输出设备中的可见区域
                2:min-width:最小宽度
                3:max-width:最大宽度

                @media screen and (min-width:600px) and (max-width:799px) {
                    body {
                        background-color: pink;
                    }
                }
        4:rem+media query:实现元素动态大小变化:  
            @media screen and (max-width:599px) {
                html {
                    font-size: 12px;
                }
            }
        5:媒体查询引入资源:针对每一种大小都加载一套资源文件的做法;
            1:大屏引入大屏的css文件,小屏引入小屏的css文件;
            2:原理:直接在link中判断设备尺寸,然后引入不用的css文件;
                css320和css640;
                3:引入方式:
                    <link rel="stylesheet" media="sceen and (min-width:320px)" href="css/css320.css">
                    <link rel="stylesheet" media="sceen and (min-width:640px)" href="css/css640.css">
            4:媒体查询最好的方式是从小到大;
    3:less基础:
        node.js:
            This package will install:
        •    Node.js v16.3.0 to /usr/local/bin/node
        •    npm v7.15.1 to /usr/local/bin/npm
            sudo npm install -g less
            lessc -v

        1:背景:
            1:css需要书写大量的没有逻辑的代码,css冗余度比较高;
            2:不方便维护,不利于重复利用;
            3:css没有很好的计算能力;
            4:其他人员,会因为缺少css编写经验,而很难组织易于维护的css项目;
        2:定义:less是css的扩展语言,也成为css的预处理;
            作为css的一种形式的扩展,他并没有减少css功能,而是在现有的css语法上,为css加入程序式语言设计,
            它在css语法基础上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了css编写,降低了css维护成本
            有更少的代码做更多的事情;

            常见的css预处理器:less,sass,stylus
        3:使用:
            1:新建less文件
            2:在less文件里面书写less语句

            1:less变量
                @变量名:value;
                @color:pink;
                1:实例:
                    @color:pink;
                    body{
                        background-color: @color;
                    }
            2:less编译
                1:easyless
            3:less嵌套(子元素直接写到父元素里面即可)
                1:parent:.header{
                    width:100px;
                    heigh:100px;
                    a{
                        display:block;
                        width:100px;
                        heigh:100px
                    }
                 }
                2:伪类:hover(使用&连接)
                    a{
                        &:hover{}
                    }

                    .nav{
                        &::before{}
                    }

            4:less运算(重点)(+ - * /)
                width:200px-50;
                注意:
                    1:运算符中间左右加空格;
                    2:两个数参与运算,如果只有一个数有单位,则最后的结果就以该单位为准;
                    3:如果两个数都有单位,而且不一样的单位,最后的结果以第一个单位为准;
                    4:除法要加括号;

            
        4:rem适配方案:
            1:等比例缩放宽高;
            2:使用媒体查询设置html字体;
        5:rem适配方案技术使用:(市场主流):
            技术方案一:
                1:less;
                2:媒体查询
                3:rem
            技术方案二:(推荐)
                1:flexiable
                2:rem
            这两种方案都存在,方案二更简单
            现在基本以750为准;

        6;实现方式:
            1:假设设计稿为750;
            2:假设将屏幕划分为15等分;
            3:每一份作为html字体的大小:
                750情况下:50px
                320情况下:21.33px
            4:配合媒体查询获取浏览器的宽度,更改html font-size
            5:实现等比例缩放效果;
                font-size=浏览器宽度/份数
                rem值=盒子的宽度/font-size;
        7:设置公共的common.less文件:
            1:新建common.less文件,设置好常见的屏幕尺寸,使用媒体查询设置不同的html字体;
            2:常见屏幕尺寸:320px,360px,375px,400px,414px,424px,480px,540px,720px,750px
            3:划分的份数定为15份
            4:pc端也可以打开移动端首页,所以默认html字体大小为50px,这句话写在最上面
        8:知识点:
            1;引入less文件:
                @import "common.less";
            2:宽度设置两种思路:
                1:width=100%;
                2:width=15rem;
                3:max-width=750px
            3:固定定位必须有宽度
            4:使用:
                font-size: (15rem / 50);
                width:88rem / 50 ;
                heigh:100rem /50 ;
            5:所有的样式都得在less文件中写