美文网首页
移动web开发(四)——响应式开发

移动web开发(四)——响应式开发

作者: believedream | 来源:发表于2017-02-13 22:27 被阅读0次

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.由于终端设备的多样化,新建站的站点会优先试用响应式来开发

相关文章

  • 响应式布局---bootstrap框架

    移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进...

  • 移动web开发(四)——响应式开发

    1.什么是响应式开发 就是:一个网站就够兼容到多个终端 2.响应式开发的原理 2.1检测方法: 1.css3中的M...

  • js基础(6)

    27、移动端响应式布局开发 响应式布局开发 1、什么是响应式布局开发?把我们开发完成的产品,能够让其适配不同的设备...

  • 移动 web 开发 —— 响应式布局

    1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不...

  • Bootstrap

    Bootstrap开篇 Bootstrap是Twitter公司推出的,专门用于开发响应式布局,移动设备优先的WEB...

  • 响应式网页设计

    响应式网页设计 定义: 响应式Web设计(Responsive Web design)是:页面的设计与开发应当根据...

  • 拯救节后拖延症,从7本新书开始

    《反应式Web应用开发》 Manuel Bernhardt著 本书分为4个部分,由浅入深地介绍了响应式Web开发的...

  • 四十二、移动端web开发之响应式布局

    一、移动端web开发 1.1、响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同...

  • Bootstrap

    Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项...

  • 初识BootStrap

    Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项...

网友评论

      本文标题:移动web开发(四)——响应式开发

      本文链接:https://www.haomeiwen.com/subject/qiwzittx.html