(17.05.04)移动端viewport、计算样式？、新盒子模

复习

    键盘事件
        onkeydown           键盘按下
        onkeyup             键盘抬起

        键码
            oEvent.keyCode

            组合按键
                Ctrl + Enter

                ctrl
                    oEvent.ctrlKey          boolean
                shift
                    oEvent.shiftKey
                alt
                    oEvent.altKey

            oEvent.key
=======================================================
    jquery
        事件
            $().on()
            $().off()
        原生对象<->jquery对象
            原生对象-》jquery对象
                $(原生对象)
            jquery对象-》原生对象
                jquery对象[下标]
                jquery对象.get(下标)
        each
            切记，只能操作jquery获取到的元素
            $('ul li').each(function(index,oEle){
                index           索引
                oEle            原生对象
                this            原生对象
            });
        获取信息
            获取位置
                相对位置
                    $().position().left/top
                绝对位置
                    $().offset().left/top

            获取宽高
                $().width()
                $().height()
            获取宽高+padding
                $().innerWidth()
                $().innerHeight()
            获取宽高+padding+border
                $().outerWidth()
                $().outerHeight()
        插件扩展
            $.fn.xxx = function(){}

            $.fn.extend({
                xxx:function(){}
            });

            jquery中所有的this都是原生对象，插件扩展中是jquery对象


        $.fn.extend({
            toRed:function(){
                //this      jquery对象
                this.on('click',function(){
                    //this      原生对象
                });
            }
        });
--------------------------------------------------------------
    CSS3
        文本切片
            -webkit-background-clip:text;
            切记一定要放在背景颜色后面
        transform的注意
            transform可以写多个值，值有先后顺序。后写的先执行
            不能操作行元素

        改变原点位置
            -webkit-transform-origin

移动端
    手机、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文件夹