媒体查询的基本用法

媒体获取

基本定义

1.使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

	//语法
    <style>
        @media mediatype and|not|only (media feature) { 
   
            CSS-Code;
        }
    </style>

mediatype：媒体类型，包含（all，print，screen，speech）
1.all–所有设备
2.print–打印机和打印预览
3.screen–电脑屏幕，平板电脑，智能手机等
4.屏幕阅读器等发声设备
广泛使用的是all和screen

        <style>
        	//使用screen媒体类型
	        @media screen {
	            body{
	                background-color: antiquewhite;
	            }
	        }
        </style>

media feature：媒体功能，如：width：屏幕可见宽度；max-height：页面最大可见区域高度等
详见 css媒体查询–媒体功能

    <style>
    	//小于等于300px时生效
        @media (max-width:300px) {
            body {
                background-color: antiquewhite;
            }
        }
    </style>

and | not | only ：逻辑操作符，可以用来构建复杂的媒体查询
1.all–用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。在不使用not或only操作符的情况下，媒体类型是可选的，默认为all。
2.not–用来对一条媒体查询的结果进行取反
3.only–表示仅在媒体查询匹配成功时应用指定样式

		//使用and逻辑操作符。横屏和最小宽度为700px时生效。
        <style>
			@media (min-width: 700px) and (orientation: landscape) {
					body {
						background-color: antiquewhite;
					}
			 }
         </style>

		 //使用not逻辑操作符，只有在大于300px时生效
	    <style>
	        @media only screen and(max-width:300px) {
	            body { 
	                background-color: antiquewhite;
	            }
	        }
	    </style>
         
         //使用only逻辑操作符，只有在小于等于300px时生效
	    <style>
	        @media only screen and(max-width:300px) {
	            body { 
	                background-color: antiquewhite;
	            }
	        }
	    </style>

2.@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

    <style>
    	//页面宽度小于等于300px时，背景变蓝色。
        @media screen and (max-width: 300px) {
            body {
                background-color: blue;
            }
        }
        //页面宽度大于等于500px时，背景变红色。
        @media screen and (min-width: 500px) {
            body {
                background-color: red;
            }
        }
    </style>

通过获取页面宽度，从而改变页面样式及布局，来达到响应式效果。

3.重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

使用方法

1.引入cs文件

   //通过mdeia指定媒体类型来实现区别引入css文件
    <link rel="stylesheet" href="./css/index.css" media="screen">
    
    //通过mdeia指定媒体类型及条件来区别引入css文件
    <link rel="stylesheet" href="./css/index.css" media="screen and (min-width:300px)">

2.style内联样式media指定媒体类型

	//通过mdeia指定媒体类型来实现区别当前style是否生效
    <style media="screen">
        body{
            background-color: antiquewhite;
        }
    </style>
    
   //通过mdeia指定媒体类型及条件来实现区别当前style是否生效
    <style media="screen and (max-width: 300px)">
        body{
            background-color: antiquewhite;
        }
    </style>

3.style内通过@media实现

        //指定媒体类型下的{}内样式生效
        <style>
	        @media screen {
	            body{
	                background-color: antiquewhite;
	            }
	        }
        </style>
        
		//只在IE8下生效
		<style>
			@media \0screen {body { background: red; }}
		</style>

此方法多用于浏览器兼容时使用

参考文档

今天的文章媒体查询的基本用法分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。