响应式布局

响应式布局

根据显示设备大小的不同，动态的切换页面布局方式

媒体查询

能够根据设备宽度的变化，设置差异化样式

@media（媒体特性）{
    选择器{
        样式
    }
}

媒体特性常用写法：

​ 最大值：max-width（宽度小于该项）

​ 最小值：min-width （宽度大于该项）

//当视口宽度小于该项（1200）时，变为红色
@media(max-width：1200px){
    bidy{
        background-color : red;
    }
}
//当视口宽度大于该项（500px）时，变为蓝色
@media(min-width:500px){
    bidy{
        background-color : skyblue;
    }
}

当视口从小到大发生变化时，可以连续使用min-width 依次控制窗口，但min-width的数值也要从小到大

（max-widt ----> 从大到小）

@media(min-width:300px){
    bidy{
        background-color : skyblue;
    }
}
@media(min-width:600px){
    bidy{
        background-color : skyblue;
    }
}
@media(min-width:900px){
    bidy{
        background-color : skyblue;
    }
}

当min-width的数值乱序时发生了样式层叠，效果会出现部分样式不会生效

媒体查询完整写法：

@media 关键词 媒体类型 and （媒体特性）{
    css代码
}

==关键词：==能够根据设备宽度的变化，设置差异化样式
and only not
==媒体类型：==能够根据设备宽度的变化，设置差异化样式

​ 媒体是用来区分设备类型的，如屏幕设备，打印设备等，其中手机，电脑，平板都属于屏幕设备

类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	speech	屏幕阅读模式
不分区类型	all	默认值，包括以上3种情形

==媒体特性：==能够根据设备宽度的变化，设置差异化样式

​ 媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高，分辨率，横屏或竖屏等

特性名称	属性	值
视口的宽和高	width，height	像素数值
视口最大宽和高	max-width、max-height	像素数值
视口最小宽和高	min-width、min-height	像素数值
屏幕方向	orientation	portrait：竖屏； landscape：横屏

media媒体查询Link引入写法

能够根据媒体查询，使用不同的css样式代码

<link rel="seylesheet" media="逻辑符 媒体类型 and （媒体特性）" href="xx.css">