定义
使用 @media
查询,你可以针对不同的媒体类型定义不同的样式。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
@media not|only mediatype and (expressions) {
/* CSS代码写在这里 */
}
/* 示例 */
/* only去掉效果一样 */
@media only screen and (max-width: 640px) {
body{
margin: 0;
}
}
常用媒体类型 | 值 |
---|---|
all | 用于所有多媒体类型设备 |
print | 用于打印机 |
screen | 用于电脑屏幕,平板,智能手机等 |
speech | 用于屏幕阅读器 |
常用特性 | 值 |
---|---|
width | 定义输出设备中的页面可见区域宽度 |
height | 定义输出设备中的页面可见区域高度 |
max-width | 定义输出设备中的页面最大可见区域宽度 |
max-height | 定义输出设备中的页面最大可见区域高度 |
max-device-width | 定义输出设备的屏幕最大可见宽度 |
max-device-height | 定义输出设备的屏幕可见的最大高度 |
orientation | 检测设备目前处于横向(值为landscape )还是纵向(值为portrait )状态 |
aspect-ratio | 检测浏览器可视宽度和高度的比例。(例如:aspect-ratio:16/9 ) |
device-aspect-ratio | 检测设备的宽度和高度的比例 |
color | 检测颜色的位数。(例如:min-color: 32 就会检测设备是否拥有32位颜色) |
使用
方法一:直接在link
中判断设备的尺寸,然后引用不同的CSS文件:
<!-- 当屏幕的宽度大于等于400px的时候,应用 A.css -->
<link rel="stylesheet" type="text/css" href="A.css" media="screen and (min-width: 400px)">
方法二:另一种方式,即是直接写在 style
标签里或CSS文件中:
/*当屏幕尺寸小于600px时,应用下面的CSS样式*/
@media screen and (max-width: 600px) {
body {
margin: 0;
}
}