响应式布局

响应式

    什么是响应式布局？

        响应式网页，自适应网页，指的是一个网页会自动根据用户浏览设备不同，自动改变布局，可以被pc端，pad，phone正常浏览。

    如何编写响应式布局？

        第一步声明viewport元标签：

            视口是什么？

                虚拟的窗口，用来盛放网页内容

            如何定义？

<meta name="viewport" content="width=device-width,initial-scale=1">

            解释：

                width = device-width  视口宽度等于设备宽度

                initial-scale    视口初始化时缩放的比例，1代表不缩放

            提出的原因：

                早期3G手机为了浏览大尺寸的网页，只能强行修改页面，导致文字，图片，超链接变得很小、

                IOS提出的概念，用于盛放网页内容，尺寸大小可以指定，超过部分滑动网页解决

        第二步：使用流式布局

                方法：使用float:left，display:inline-block

        第三步：所有的容器文字，图片都要使用相对的尺寸，不使用绝对的尺寸

                方法：不使用px，使用百分比，em等

        第四步(重点)：使用CSS3 Media Query技术

                什么是？：

                    1、Media    指的是浏览网页的设备 

                        screen(PC/PAD/PHONE/PRINT/TV)

                    2、Media Query    查询出当前浏览网页的设备类型，以及特性(解析度，对比度，尺寸，手持的方向等)

不同而选择性执行某些CSS代码，而忽略另外一些

                    实现方法：

                        1、根据媒体查询结果执行不同的外部CSS文件

              <link media = "screen and (min-width:768px) and (max-width:991px)" rel = "stylesheet" href="css/xx.css">

                        2、根据媒体查询结果执行不同的CSS片段(常用)

             @media screen and (min-width:768px) and (max-width:991px){

                    ...

              }

             解析：如果宽度在范围内，就执行{}内的代码