CSS_移动端布局_响应式

1.什么是移动端？

               移动端是可以移动的设备都可以称之为移动端：手机，pad，kindle，电话手表

        2.如何查看移动端的页面

               设备模拟器==如何开启设备模拟器呢？==页面中右键====检查

                在右侧窗口上会有两个小图标：第一个图标，选中工具；第二个图标：设备模拟器

        3.认识一下设备模拟器中的内容

           iPhone4====手机型号

           320*480====对应的手机屏幕的大小px

           75%=========最佳的观看比例

           小图标======旋转屏幕（横屏和竖屏）

           设备模拟器最右侧有三个竖着的点====

           capture  screenshot================捕捉当前的屏幕

           capture  full  size  screenshot====捕捉当前视口屏幕中的所有，包括滚动条

        4.认识了解一下手机屏幕的型号尺寸

           iPhone4=============320px*480px

           iPhone5=============320px*568px

           iPhone678===========375px*667px

           iPhone678plus=======414px*736px

        5.手机屏幕里面截取的设计稿的大小

           iPhone4=============640px*960px

           iPhone5=============640px*1136px

           iPhone678===========750px*1334px

           iPhone678plus=======1242px*2208px

           通过你的手机型号和你的设计稿对比得出结论

           iPhone3===========设计稿是屏幕的1倍

           iphone45678=======设计稿是屏幕的2倍

           iPhone678plus=====设计稿是屏幕的3倍

        6.说明比值问题

           设备像素比（dpr）=物理像素/CSS像素（确定死的）

             物理像素===你的设计稿里面的距离，ps里面测量的距离

             CSS像素====做开发的时候，编写代码的时候，自己设置的对应的单位

          依据上面学的内容====做开发的时候，在iPhone4

             UI===设计稿上面你测量的一个图片的大小为320px（物理像素）

             编写前端代码的时候，你图片转换的时候，应该为多少个像素（CSS像素）

             CSS像素=物理像素/dpr（除以2或者除以3）

             CSS像素=物理像素/dpr（2/3）

        7.移动端布局准备工作2

             设置一个盒子：700px*300px的盒子 放在pc看没有任何问题

             但是放在移动端里面查看有问题

               1）双击放大=====移动端禁止你双击放大===实现的跳转

               2）在任何一个移动端手机里面查看的时候出现问题

                  320px的手机屏幕居然能容纳700px的盒子，并且还有剩余

                  产生的原因是

                   视口不同

                    视觉视口========你的眼睛能看见的区域的窗口

                    布局视口========你编写的CSS的页面样式

                    理想视口========通过理想视口进行转化，将你的布局视口正好放进去

                     <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,inital-scale=1.0,user-scalable=no">

        8.移动端布局的步骤

           1.新建文件html，css

           2.引入自己的CSS文件

           3.引入你的icon图标css文件

           4.引入你的视口

           5.确定你的素材出自于哪一个手机型号

             主要就是为了确定设备像素比

           6.CSS像素=物理像素/dpr

              你测量的设计稿里面的所有数据都需要/dpr

              把这个单位当做你的CSS像素

            7.写代码

             HTML结构部分

             <header>头部</header>

             <section>主体</section>

             <footer>尾部</footer>

             编写CSS

             *{margin:0;padding:0}

             ul{list-style:none}

             a{text-decoration:none}

             input{outline:none;border:none}

             img{display:block}

             html,body{height:100%}

             使用弹性盒子布局

             body{

                 弹性盒子

                 display：flex

                 改变主轴方向

                 flex-direction:column

             }