前端学习(二十五）移动端（笔记）

移动端
        手机、pad、watch、电视
    -------------------------------------------------
    移动端和pc端的写法一样。只不过更加注意尺寸。
    移动端测试
        1.浏览器模拟手机             仅供参考
        2.真机测试


        写移动端必须加viewport
            viewport         视口

            <mate name="viewport" content="width=320"/>
                让页面按照320尺寸走
            <mate name="viewport" content="width=device-width"/>
                让页面按照设备尺寸走
            <mate name="viewport" content="width=device-width,user-scalable=no"/>
                禁止用户缩放
            <mate name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0"/>
                初始化缩放比例

            <mate name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0"/>
                最大缩放比例
                最小缩放比例

                只要是移动端都要加这个viewport
================================================================
    小知识点
        计算样式
            calc
            calc(25% - 2px)
                空格千万别删
        ---------------------------------------------------
        盒子模型
            width/height+padding+border
            传统盒子模型
                向外挤
            新盒子模型
                向里挤

            box-sizing: border-box;             新
            box-sizing: content-box;             老


    弹性布局
        flex布局

        开启弹性布局
            display: flex;         float、clear都不好使    
        
            flex                      每一份占的比例

            flex-direction:         弹性方向
                row                 行(默认)
                row-reverse         行反转
                column                 列
                column-reverse         列反转

            flex-wrap                 是否换行
                nowrap                 不换行(默认值)
                wrap                 换行
                wrap-reverse         反转换行

            justify-content         水平排列
                center                 居中
                flex-start            左侧
                flex-end              右侧
                space-between         平分
                space-around         间距一样

            align-items             垂直排列
                center                 居中
                flex-start             上
                flex-end             下


    overflow         操作滚动条
        overflow: hidden;             没有滚动条
        overflow: auto;             自动，不超出就没有，超出就有

        overflow-x:         横向
        overflow-y:         纵向


    rem    
        单位

        1em         当前这个元素的一个字体大小

        1rem         根字体大小     就是html的字体大小

                     二倍图         三倍图
        320         640         960
        375         750            。。。
        414         828            。。。
==============================================================
        尺寸/2


        求新的rem
            基准rem/基准宽度 = 新rem/新宽度
            基准rem/基准宽度 = ?/新宽度
            ? = 基准rem/基准宽度*新宽度
            ? = 20/320*document.documentElement.clientWidth

        window.onresize             当浏览器大小改变的时候触发

        **********************
        切记:用rem布局不要用px了。
            例外：1px边框

图标
    https://icomoon.io/
        下载后解压
            需要style.css和fonts文件夹