响应式布局

@hxl

于 2019-09-16 18:59:10 发布

阅读量142

点赞数

本文链接：https://blog.csdn.net/qq_38105960/article/details/100897847

版权

响应式布局
就是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本，如PC,手机,平板。

优点：
1.面对不同的分辨率设备灵活性强
2.能够快速的解决多设备显示的适应问题
3.适合中小型网站

缺点：
1.兼容于各种设备工作量大，效率降低
2.代码累赘，以及加载事件过长

原理：
通过C3的媒体查询来定制某个宽度区间的网页布局

媒体查询：能检测我们设备的宽度，通过不同的宽度显示不同的样式

超小屏幕（移动设备手机） (<768px)
小屏幕（版本设备平板） (≥768px)
中等屏幕（标屏设备桌面显示器） (≥992px)
大屏幕（宽屏电脑大桌面显示器） (≥1200px)

语法：
@media 媒体类型关键字媒体特性（即媒体条件） {样式代码}

@media screen and (min-width:768px) and (max-width:992px){
        //屏幕满足769-992px之间时的样式设置，注意：and后必须有空格}

@media screen and (min-width: 768px){}
@media screen and (min-width: 992px){}
@media screen and (min-width: 1200px){}
或者
@media (max-width: 767px){}
@media (min-width: 768px) and (max-width: 991px){}
@media (min-width: 992px) and (max-width: 1199px){}
@media (min-width: 1200px){}

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            background-color: #ccc;
            transition: all 1s;
        }
      /*@media screen and (max-width: 768px){
            .content{
                width: 100%;
                background-color: pink;
            }
        }
        @media screen and (min-width: 768px) and (max-width: 992px){
            .content{
                width: 750px;
                background-color: cyan;
            }
        }

        @media screen and (min-width: 992px) and (max-width: 1200px){
            .content{
                width: 970px;
                background-color: orange;
            }
        }
        @media screen and (min-width: 1200px){
            .content{
                width: 1170px;
                background-color: green;
            }
        }*/
        /*媒体查询的原理：就和样式覆盖的原理一样，当条件条件成立时执行*/
        /*可简写为*/
		//768px以下显示conten的背景 background-color: #ccc;
        @media screen and (min-width: 768px) {
            /*平板*/
            .content{
                width: 750px;
                background-color: cyan;
            }
        }

        @media screen and (min-width: 992px){
            /*标屏*/
            .content{
                width: 970px;
                background-color: orange;
            }
        }
        @media screen and (min-width: 1200px){
            /*宽屏*/
            .content{
                width: 1170px;
                background-color: green;
            }
        }

    </style>
</head>
<body>
<div class="content"></div>
</body>
</html>

@hxl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局

响应式布局就是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本，如PC,手机,平板。优点：1.面对不同的分辨率设备灵活性强2.能够快速的解决多设备显示的适应问题3.适合中小型网站缺点：1.兼容于各种设备工作量大，效率降低2.代码累赘，以及加载事件过长原理：通过C3的媒体查询来定制某个宽度区间的网页布局媒体查询：能检测我们设备的宽度，通过不同的宽度显示不同的样式超...
复制链接

扫一扫