移动web开发（四）——响应式开发

1.什么是响应式开发

就是：一个网站就够兼容到多个终端

2.响应式开发的原理

2.1检测方法：

1.css3中的Media Query（媒介查询)

2.js检测

通过查询screen的宽度来指定某个宽度区间的网页布局

2.2屏幕分类

超小屏幕（移动设备） 768px以下

小屏设备（768px - 992px）

中等屏幕（992px-1200px）

宽度设备（1200px）

2.3Media Query（媒介查询)代码演示

 @media screen and (max-width:768px){
            /*定义我们这个区间内的样式*/
            .container{
                width: 100%;
                background: green;
            }
        }
        /*768-992 需要在小屏幕设备下  显示黄色并且宽度750px*/
        @media screen and (min-width:768px) and (max-width: 992px){
            /*定义我们这个区间内的样式*/
            .container{
                width: 750px;
                background: yellow;
            }
        }
        /*992-1200 需要在中等屏幕下  显示蓝色并且 宽度是 970px*/
        @media screen and (min-width:992px) and (max-width: 1200px){
            /*定义我们这个区间内的样式*/
            .container{
                width: 970px;
                background: blue;
            }
        }
        /*1200 需要在大屏幕下 显示粉红色 宽度1170px*/
        @media screen and (min-width:1200px){
            /*定义我们这个区间内的样式*/
            .container{
                width: 1170px;
                background: pink;
            }
        }

2.4 响应式开发-移动web开发和响应式开发的对比

compare.png

2.5总结：

1.移动web开发和响应式开发都是现在主流的开发模式

2.使用的都是流式布局，来适配不同的设备

3.由于终端设备的多样化，新建站的站点会优先试用响应式来开发