媒体查询

标签:span   ack   code   style   样式   文件   href   媒体查询   bsp   

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)"/>

 

媒体查询

标签:span   ack   code   style   样式   文件   href   媒体查询   bsp   

原文地址:https://www.cnblogs.com/black-eyes/p/14118333.html

版权声明:完美者 发表于 2020-12-16 12:28:25。
转载请注明:媒体查询 | 完美导航

暂无评论

暂无评论...