十六、响应式布局--媒体查询

最新推荐文章于 2023-01-24 19:59:03 发布

二旬、

最新推荐文章于 2023-01-24 19:59:03 发布

阅读量4.9k

点赞数 14

分类专栏： WEB基础-CSS

本文链接：https://blog.csdn.net/weixin_45602227/article/details/117416761

版权

WEB基础-CSS 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

一、响应式布局概念

1.1 什么是响应式布局

	
	响应式布局
			 1.网页可以根据不同的设备或窗口大小呈现出不同的效果
			 2.使用响应式布局可以使一个网页适配所有设备
			 3.响应式布局的关键就是媒体查询
			 4.通过媒体查询可以为不同的设备、设备的
			   不同状态来分别设置样式。

1.2 响应式布局和移动端网页的区别


		响应式布局和移动端网页的区别：
				1、响应式布局可以通过一个网页适用于所有的设备。
				2.移动端网页是专门为移动端设备开发的网页。

1.3 响应式布局案例

		响应式布局案例：
				1.jquery官网。
				2.美团官网

二、响应式布局实现（媒体查询）


	media媒体查询
			 语法: 
			       @media 查询规则{  css-code }

2.1 媒体类型(mediatype)


	+++ 媒体查询一共有四种类型。
				
			all     默认值，所有设备（可省略不写）
			print   打印设备(用于打印机和打印预览)
		    screen  用于电脑屏幕，平板电脑，智能手机等
		    speech  应用于屏幕阅读器等发声设备

	 +++ 注意事项 
	        1) 媒体类型之间使用【,】连接，表示或。
			
						@media all{ }	在所有设备 	 
						@media print ,screen { } 使用逗号连接多个设备类型。表示或。
					
			2) 在媒体类型前添加only,表示只有。
	     	   only的使用主要是为了兼容一些老版本的浏览器。 

			
			3)在媒体类型前面添加not,表示非。

			
			4)切记not、only只能有一个

1）媒体查询一共有四种类型，为不同设备分别指定样式


        /** 支持所有设备 */
        @media   all {
             body{
                 background-color: red;
             }
        }

        /** 支持所有带屏幕的设备 */
        @media screen {
            body{
                 background-color: pink;
             }           
        }


        /** 支持打印设备 */
        @media  print{
            body{
                 background-color: pink;
             }           
        }

        /** 支持阅读设备 */
        @media speech {
            body{
                 background-color: pink;
             }           
        }

2）媒体类型之间使用【，】连接。表示或

       /** 支持所有带屏幕的设备或支持打印设备 */
       @media screen , print {
           body{
                background-color: pink;
            }           
       }

3）在媒体类型前添加not，表示非

	
	  @media    not    all  {
	            body{
	                 background-color: pink;
	             }           
	        }

4）在媒体类型前添加only，表示只有（作用：兼容老版本）

	
         /** 表示只支持屏幕的。兼容老版本浏览器 */
         @media only screen   {
            body{
                 background-color: pink;
             }           
        }

2.2 媒体特性

	
	媒体特性有许多，这里只演示这几个比较重要的特性:
		
				width      视口的宽度
				min-width  视口的最小宽度   (视口大于指定宽度时生效)
				max-width  视口的最大宽度   (视口小于指定宽度时生效)
	
	
				height 视口的高度			
				min-height 视口的最小高度
				max-height 视口的最大高度
				 					 	  (一般不考虑视口的高度，所以这三个属性不重要)

1) 指定视口宽度媒体特性，表示视口符合这个条件时，才会使用该样式

		1.指定视口宽度,只有视口符合该条件时，才会使用该样式。
		
					 @media (width:500px) {
			            body{
			                 background-color: pink;
			             }           
			         }

>>>>>> width:500px 视口宽度只有等于这个值时，才会使用该样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        /** 视口=500px时,使用该样式*/
        @media    (width:500px) {
            body{
                 background-color: pink;
             }           
        }

    </style>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

>>>>>> min-width:500px 视口宽度只有大于这个值时，才会使用该样式

       /** 视口=500px时,使用该样式*/
        @media    (min-width:500px) {
            body{
                 background-color: pink;
             }           
        }

在这里插入图片描述

>>>>>> max-width:500px 视口宽度只有小于这个值时，才会使用该样式

    @media    (max-width:500px) {
            body{
                 background-color: pink;
             }           
        }

在这里插入图片描述

2) 媒体特性之间可以使用【not】、【and】、【，】

		
		not:表示非
		and:表示与
		,:  表示或

>>>>>> 【，】表示或

	
	+++ 视口<300 或 视口>500 ,使用该属性
		    @media  (max-width:300px) ,(min-width:500px){
		            body{
		                 background-color: pink;
		             }           
		        }

>>>>>> 【and】表示与

	
	+++ 300 < 视口 < 500,使用该属性
		 @media (min-width:300px) and (max-width:500px) {
		            body{
		                 background-color: pink;
		             }           
		        }

3) 响应式布局断点

样式切换的分界点，我们称其为断点，也就是网页的样式在这一点时发生变化。

				
		每一种响应式布局，都会有这样的断点。
		
		一般比较常用的断点：
						<768   超小屏幕，一般是手机  max-width=768px
						>768  	小屏幕			  min-width=768px
						>992   中型屏幕（一般为pad） min-width=992px
						>1200  电脑屏幕			min-width=1200px

2.3 媒体查询总结

	
	@media  [not/only]  媒体类型   媒体特性{  css-code }
	@media   媒体特性{  css-code }

>>>>>> 媒体类型之间只能用【，】连接

     @media   all, screen and(width:200px)  {
            body{
                 background-color: pink;
             }           
        }

>>>>>> not、only只能出现在媒体类型前面

	 表示非所有设备。
	 @media   not all and(width:200px)  {
            body{
                 background-color: pink;
             }           
        }

      @media   only all and(width:200px)  {
            body{
                 background-color: pink;
             }           
        }

>>>>>> 媒体类型与媒体特性之间或媒体特性之间只能用【and】【，】连接

    @media    all ,screen and(width:200px)  {
            body{
                 background-color: pink;
             }           
        }


      @media    all ,screen and(width:200px) and(max-width:500px)  {
            body{
                 background-color: pink;
             }           
        }

>>>>>> 如果没有媒体类型，则媒体类型默认为all

    @media  (width:200px) and(max-width:500px)  {
            body{
                 background-color: pink;
             }           
        }

二旬、

关注

14
点赞
踩
84

收藏

觉得还不错? 一键收藏
1
评论
十六、响应式布局--媒体查询

一、响应式布局概念1.1 什么是响应式布局响应式布局 1.网页可以根据不同的设备或窗口大小呈现出不同的效果 2.使用响应式布局可以使一个网页适配所有设备 3.响应式布局的关键就是媒体查询 4.通过媒体查询可以为不同的设备、设备的不同状态来分别设置样式。 1.2 响应式布局和移动端网页的区别响应式布局和移动端网页的区别： 1、响应式布局可以通过一个网页适用于所有的设备。 2.移动端网页是专门为移动端设备开发的
复制链接

扫一扫