CSS响应式布局

**
根据游览网页设备（pc, phone, pad, print, tv）的不同，而自动的改变布局，图片文字效果，不会影响用户的游览体验
**
响应式网页必须做到下面几件事

1. 布局，不能固定元素的宽度，必须是流式布局（默认文档+浮动）
2. 文字和图片大小随着容器的大小而改变 rem
3. 使用css3提供的媒体查询功能 相应网页依靠的是媒体查询技术，媒体查询技术会导致css代码量几何性的增加。

复杂页面不适合响应式

编写响应式网页
1移动端的适配

在meta中设置视口
<meta name="viewpoint" content=
"width=device-width, //视口宽度为设备宽度
initial-scale=1, //视口宽度初始化缩放倍率
maximum-scale=1, //视口缩放最大倍率
user-scalable=0"/>// 用户能否缩放
简写
<meta name="viewpoint" content="width=divice-width,inital-scale=1"/>

2 所有内容/文字/图片 都使用相对尺寸，不要用绝对尺寸
3 流式布局 + 弹性布局 + 媒体查询 完成一个相应式布局
Media Query： 可以根据当前游览设备不同，有选择性执行一部分，忽略其他样式，设备不同（硬件，尺寸，横竖屏，解析度）

分辨率分类
x>=1200 超大屏 xl min-width:1200px
992< =x > 1200 大屏 lg min-width:992px and max-width:1199px
768< =x > 992 中屏 md
576< =x > 768 小屏 sm
x < 576 超小屏 xs

@media screen and (min-width:992px) and (max-width:1199px) {
}

@media 硬件 and 尺寸{ 选择器{样式} }
if（硬件 ）

<style>
        /* PC上 背景为黄色，字体为红色，字号24px */
        /* pad上 背景purple，字体为pink，字号16px */
        /* phone上 背景为黑色，字体为白色，字号24px */
        
       
        @media  screen and (min-width:768px)  {
            .content {
                background: #000; color: #fff;
                font-size: 12px;
            }
        }
        @media screen and (min-width:992px)  {
            .content {
                background-color: #ff0;
                color: red;
                font-size: 16px;
            }
        }
        @media screen and (min-width:1200px) {
            .content {
                background-color: #0ff;
                color: #f0f;
                font-size: 36px;
            }
        }
       
    </style>