css学习笔记-响应式布局

概述

响应式页面就是使用同一套代码，在不同的设备中展现出不同的效果

属性

媒体查询

通过@media定义样式，浏览器窗口满足指定条件，才会应用此样式

举例

<div class="box"></div>

.box{
        width: 300px;
        height: 300px;
        background-color: red;
    }
    @media screen and (max-width:600px) {
        .box{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    }

当浏览器视窗大于600px时

当浏览器视窗小于600px时

特点