zoukankan html css js c++ java

响应式布局之媒体查询

媒体查询可以根据设备显示器特性设定CSS样式。

媒体查询语法：

1、写在样式里:
@media 条件

@media screen and (max- 550px){
/*样式*/ 
}

2、写在link标签里

<link rel="stylesheet" media="screen and (max-550px)" href="media.css"/>

媒体查询常用的是检测视口宽度（width）和屏幕宽度（device-width）。

试一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体查询</title>
    <style>
    body{
        background-color: grey;
    }
    /*窗口< 960px*/
        @media screen and (max- 960px){
            body{
                background: red;
            }
        }
    /*窗口< 768px*/
        @media screen and (max- 768px) {
            body{
                background:orange;
            }
        }
    /*窗口< 550px*/
        @media screen and (max- 550px){
            body{
                background:yellow;
            }
        }
    /*窗口< 320px*/
        @media screen and (max- 320px){
            body{
                background: green;
            }
        }
    </style>

</head>
<body>
    改变浏览器窗口宽度，背景颜色会根据当前视口尺寸发生改变。
</body>
</html>

查看全文

相关阅读:
hdu 1251(字典树)(3种方法)
HDU 2203(KMP算法)
九度oj 题目1335：闯迷宫
 poj3894 bfs+记录路径
 状压dp--P2704
状压dp--洛谷P2622
动态规划--牛客多校number
完全背包
 01背包--hdu
莫比乌斯反演模板--Gym 101982B

原文地址：https://www.cnblogs.com/tinyphp/p/5222899.html