07-14日份学习（媒体查询-响应式布局）

多媒体查询语法

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) {
    CSS 代码...;
}

多媒体类型

 实例展示

                以下实例在屏幕可视窗口尺寸等于或小于 600 像素时将菜单浮动到页面左侧：

float:left;（内容浮动到左侧）

text-align（属性指定元素文本的水平对齐方式）

                body代码：

                css样式代码：

* {
            margin: 0;
            padding: 0;
        }
        
        .nav-box {
            width: 100%;
            overflow: auto;
            background-color: green;
        }
        
        .nav {
            width: · 1000px;
            height: 40px;
            margin: 0 auto;
            border: 1px solid white;
        }
        
        .nav a {
            display: inline-block;
            width: 150px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            text-decoration: none;
            color: white;
        }
        
        .nav a :first-child {
            font-size: 18px;
            font-weight: bold;
            margin-right: 20px;
        }
        
        .nav a:not(:first-child):hover {
            background-color: yellow;
            color: black;
        }

                 悬停样式：（鼠标悬停标签上显示黄色背景，字体为黑色）

 效果展示

屏幕可视窗口尺寸等于或小于 600 像素时：