CSS媒体查询

该文章由 leevare 发布于 ,归类于 HTML/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的一些参数汇总

序号参数作用
1width浏览器可视宽度
2height浏览器可视高度
3device-width设备屏幕的宽度
4device-height设备屏幕的高度
5orientation检测设备目前处于横向还是纵向状态
6aspect-ratio检测浏览器可视宽度和高度的比例(如:aspect-ratio:16/9)
7device-aspect-ratio检测设备的宽度和高度的比例
8color检测颜色的位数 (如:min-color:32就会检测设备是否拥有32位颜色)
9color-index检查设备颜色索引表中的颜色,他的值不能是负数
10monochrome检测单色楨缓冲区域中的每个像素的位数
11resolution检测屏幕或打印机的分辨率
12grid检测输出的设备是网格的还是位图设备

关于媒体查询的详细介绍,可以查看这里

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒