响应式布局原理,media query媒体查询简单写法

原创
2016/09/19 23:01
阅读数 570
1. 第一种写法
 <style>
        body{
            margin: 0;
            padding: 0;
        }
        .container{
            /*在固定布局中*/
            width: 1200px;
            height: 1200px;
            background-color: pink;
            margin: 0 auto;
        }

        /*利用media query 查询屏幕*/
        /*1.在大屏设备中,布局容器  背景变成蓝色  宽度变成1170px 内容居中*/
        /*and  与后面的条件之间要有空格*/
        @media screen and (min-width: 1200px) {
            .container{
                background: blue;
                width: 1170px;
            }
        }
        /*2.在中屏设备中,布局容器变为红色  宽度变为970px  内容居中*/
        @media screen and (min-width: 992px) and (max-width: 1200px){
            .container{
                background: red;
                width: 970px;
            }
        }
        /*3.在小屏设备中 布局容器 变成绿色 宽度变为 750px 内容居中*/
        @media screen and (min-width: 768px) and (max-width:992px){
            .container{
                background: green;
                width: 750px;
            }
        }
        /*4.在超小屏幕设备中 布局容器 背景变为黄色 宽度变为100% 内容自适应*/
        @media screen and (max-width:768px){
            .container{
                background:yellow ;
                width: 100%;
            }
        }
2. 第二种写法
       <style>
        body{
            margin: 0;
            padding: 0;
        }
        .container{
            /*在固定布局中*/
            width: 1200px;
            height: 1200px;
            background-color: pink;
            margin: 0 auto;
        }
        /*利用media query 查询屏幕*/
        /*4.在超小屏幕设备中 布局容器 背景变为黄色 宽度变为100% 内容自适应*/
            .container{
                background:yellow ;
                width: 100%;
            }

        /*3.在小屏设备中 布局容器 变成绿色 宽度变为 750px 内容居中*/
        @media (min-width: 768px){
            .container{
                background: green;
                width: 750px;
            }
        }
        /*2.在中屏设备中,布局容器变为红色  宽度变为970px  内容居中*/
        @media (min-width: 992px){
            .container{
                background: red;
                width: 970px;
            }
        }
        /*1.在大屏设备中,布局容器  背景变成蓝色  宽度变成1170px 内容居中*/
        @media(min-width: 1200px) {
            .container{
                background: blue;
                width: 1170px;
            }
        }

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部