1】视口：浏览器显示内容的区域。
        PC端：
                屏幕大
                视口：浏览器的大小。而且可以改变浏览器的大小，也就改变了视口的大小。
        手机端：
                屏幕小
                浏览器大小是不能改变的。
               
                历史问题：以前布局的页面是不是都是以pc端为主，小屏幕怎么显示大网页。
                解决：手机浏览器厂商，设置了默认的视口--布局视口layout viewport  980px。               
               
                现在的问题：随着手机设备的发展，专门针对手机端设计小页面，但浏览器的默认视口比较大。               
                解决：发明了1个meta标签，作用：改变手机浏览器的默认视口大小，根据手机浏览器大小。
               
        2】meta标签（能够在移动页面中复制过来，知道含义）
                作用：根据手机浏览器屏幕大小，改变手机浏览器的默认视口大小。
                默认视口大小 = 设备屏幕大小
               
        3】
                物理像素：屏幕的发光点（分辨率），
                css像素（布局像素）
                        pc　端：1px就等于1个物理像素。
                        移动端：以iphone8为例，物理像素750个发光点，网页布局时，375px就占满了浏览器屏幕。
                物理像素比：在浏览器的css中设置1px，要用几个发光点去发光显示。
               
        4】倍图问题
                1）由来：图片在高清的屏幕显示时，会被放大，图片放大就

1】视口：浏览器显示内容的区域。
        PC端：
                屏幕大
                视口：浏览器的大小。而且可以改变浏览器的大小，也就改变了视口的大小。
        手机端：
                屏幕小
                浏览器大小是不能改变的。
               
                历史问题：以前布局的页面是不是都是以pc端为主，小屏幕怎么显示大网页。
                解决：手机浏览器厂商，设置了默认的视口--布局视口layout viewport  980px。               
               
                现在的问题：随着手机设备的发展，专门针对手机端设计小页面，但浏览器的默认视口比较大。               
                解决：发明了1个meta标签，作用：改变手机浏览器的默认视口大小，根据手机浏览器大小。
               
        2】meta标签（能够在移动页面中复制过来，知道含义）
                作用：根据手机浏览器屏幕大小，改变手机浏览器的默认视口大小。
                默认视口大小 = 设备屏幕大小
               
        3】
                物理像素：屏幕的发光点（分辨率），
                css像素（布局像素）
                        pc　端：1px就等于1个物理像素。
                        移动端：以iphone8为例，物理像素750个发光点，网页布局时，375px就占满了浏览器屏幕。
                物理像素比：在浏览器的css中设置1px，要用几个发光点去发光显示。
               
        4】倍图问题
                1）由来：图片在高清的屏幕显示时，会被放大，图片放大就