移动端 之 响应式 布局

移动端 之 响应式 布局

响应式开发

  • 原理 就是使用媒体查询 针对不同宽度的设备进行布局和样式设置 从而适配不同设备的目的

移动端 之 响应式 布局

响应式 布局容器

移动端 之 响应式 布局
代码展示

<style>
        .container{
            height: 188px;
            background-color: skyblue;
            margin:  100px auto;
        }
            /* 超小屏幕下 小于768px 最大不大于768 所以给个767  布局容器的宽度设置100% */
            @media screen and (max-width:767px) {
                .container{
                    width: 100%;
                }
            }
         /* 小屏幕下 大于 等于 768px 最小不小于768 布局容器的宽度设置750px */
         @media screen and (min-width:768px) {
                .container{
                    width: 750px;
                }
            }
            /* 中等屏幕下 大于 等于 992px 最小不小于992px 布局容器的宽度设置970px */
            @media screen and (min-width:992px) {
                .container{
                    width: 970px;
                }
            }
             /* 大屏幕下 大于 等于 1200px 最小不小于1200px 布局容器的宽度设置1170px */
             @media screen and (min-width:1200px) {
                .container{
                    width: 1170px;
                }
            }
    </style>
</head>
<body>
    <!-- 响应式开发里面 首先需要一个布局容器 -->
    <div class="container"></div>
</body>
上一篇:解决freeNas afp服务mac无法连接的问题


下一篇:TI深度学习(TIDL)--2