CSS媒体查询
媒体查询常用样式表：
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> // 竖放加载
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css"> // 横放加载
//竖屏时使用的样式
<style media="all and (orientation:portrait)" type="text/css">
#landscape { display: none; }
</style>
//横屏时使用的样式
<style media="all and (orientation:landscape)" type="text/css">
#portrait { display: none; }
</style>
扩展： media的一些参数汇总
| 序号 | 参数 | 作用 |
|---|---|---|
| 1 | width | 浏览器可视宽度 |
| 2 | height | 浏览器可视高度 |
| 3 | device-width | 设备屏幕的宽度 |
| 4 | device-height | 设备屏幕的高度 |
| 5 | orientation | 检测设备目前处于横向还是纵向状态 |
| 6 | aspect-ratio | 检测浏览器可视宽度和高度的比例(如：aspect-ratio:16/9) |
| 7 | device-aspect-ratio | 检测设备的宽度和高度的比例 |
| 8 | color | 检测颜色的位数 （如：min-color:32就会检测设备是否拥有32位颜色） |
| 9 | color-index | 检查设备颜色索引表中的颜色，他的值不能是负数 |
| 10 | monochrome | 检测单色楨缓冲区域中的每个像素的位数 |
| 11 | resolution | 检测屏幕或打印机的分辨率 |
| 12 | grid | 检测输出的设备是网格的还是位图设备 |
关于媒体查询的详细介绍，可以查看这里
- 本博客所有文章除特别声明外，均可转载和分享，转载请注明出处！
- 本文地址：https://www.leevii.com/?p=286