媒体查询的两种方式

本文转载自查看原文 2018-01-10 21:45 3754

第一种：link的方式：

1 <link rel="stylesheet" media="screen and (max-width:600px)" href="./css/blue.css">
2     <link rel="stylesheet" media="screen and (min-width:900px)" href="./css/red.css">
3     <link rel="stylesheet" media="screen and (min-width:1200px)" href="./css/yellow.css">

第二种：css的方式：

    <style>
        @media screen and (max-width:600px) {
            body {
                background-color: blue;
            }
        }

        @media screen and (min-width:900px) {
            body {
                background-color: red;
            }
        }

        @media screen and (min-width:1200px) {
            body {
                background-color: yellow;
            }
        }
    </style>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 rem适配的两种方式（css媒体查询和js控制） elasticsearch之查询的两种方式常见布局、媒体查询 CSS媒体查询及其使用媒体查询 + rem用法媒体查询的详细用法媒体查询使用——@media 移动端媒体查询 JPA 实现分页查询的两种方式控制页面打印的2种方法（css3的media媒体查询和window.print()）