前端-html，css响应式布局

响应式布局

1.什么是响应式布局

CSS3响应式布局是指同一页面在不同的浏览器窗口尺寸下展示不同的布局方式。

传统的开发方式是PC端一套代码，移动端再开发另一套代码。而响应式只需要一套代码就可以了，既可以适用于PC短端也可以适用于移动端。

响应式布局的缺点是需要的css比较多。

2.实现响应式的方案

2.1方案一：媒体查询

最好用最常用的方案。媒体查询可以规定元素在页面对应的尺寸展示对应的css样式

  /*
    媒体类型：
        screen  用于电脑屏幕，平板电脑，智能手机等。
        all  用于所有设备
        （一般选用这两个值之一即可，其他值大部分被废弃或者用不到）

    and：
        每一个值之间的链接符号

    */

    /*初始样式*/
    body{background-color: #aaa;}


    /*屏幕宽度 小于700px 时*/
    @media screen and (max-width: 700px ){
        body{ background-color: #1dba2d;}
    }

    /*屏幕宽度 大于700px 且 小于900px 时*/
    @media screen and (min-width: 700px) and (max-width: 900px ){
        body{ background-color: #3f1dba;}
    }

    /*屏幕宽度 大于900px 且 小于1200px 时*/
    @media screen and (min-width: 900px) and (max-width: 1200px ){
        body{ background-color: #ba1d54;}
    }

    /*屏幕宽度 大于1200px 时*/
    @media screen and (min-width: 1200px ){
        body{ background-color: #ba931d;}
    }

2.2 百分比布局

尽量不实用固定的宽度，用百分比代替，从而做到随窗口缩小布局变化。但是适用性并不高，做出来的页面每时每刻都在变各种布局文字等看起来不好看。一般会配合着媒体查询在某些局部的布局使用。

2.3rem

rem是一个相对单位， 1rem = html的font-size大小。所以可以通过js在改变页面宽度时修改html的font-size，从而做到改变页面中所有rem单位对应的样式。同方案二，适用性并不高，某些布局中宽高字体等大小不太好控制。