媒体查询

Posted 2020-12-22 black-eyes

1.根据屏幕大小改变背景颜色

<style type="text/css">
    /* 媒体查询可以根据不同的屏幕尺寸改变不同的样式 */
    /* 屏幕最大宽度就是800像素 */
    @media screen and (max-width: 399px) {
           body {
            background: pink;
        }
    }
    @media screen and (min-width: 400px) {
        body {
            background: blue;
        }
    }
    @media screen and (min-width: 800px) {
        body {
            background: plum;
        }
    }
</style>

2.一般都是两个CSS文件对应大屏幕和小屏幕，引入资源

<link rel="stylesheet" type="text/css" href="" media="screen and (max-width: 399px)"/>
<link rel="stylesheet" type="text/css" href="" media="screen and (min-width: 400px)"/>
<link rel="stylesheet" type="text/css" href="" media="screen and (min-width: 800px)"/>