前端开发_HTML5_布局-响应式布局

自适应布局(多设备布局)1.引入我们通过之前的学习，学习了多种不同的布局方式。我们学习布局是为了解决页面样式的问题。我们知道HTML5不仅仅可以在电脑端显示，而且它还可以在手机端和平板端显示，但是我们会发现一个问题，当我们在电脑端调整好的页面在其他的设备上显示的时候样式会出现变化，从而导致显示内容的错乱。为了解决在不同设备上显示的问题，我们接下来学习以下自适应布局。在学习这一个自适应布局之前，我们

魔笛手7

2460人浏览 · 2021-12-21 09:05:03

魔笛手7 · 2021-12-21 09:05:03 发布

响应式布局

1.引入

我们通过之前的学习，学习了多种不同的布局方式。我们学习布局是为了解决页面样式的问题。我们知道HTML5不仅仅可以在电脑端显示，而且它还可以在手机端和平板端显示，但是我们会发现一个问题，当我们在电脑端调整好的页面在其他的设备上显示的时候样式会出现变化，从而导致显示内容的错乱。为了解决在不同设备上显示的问题，我们接下来学习以下自适应布局。在学习这一个自适应布局之前，我们需要先学习两个比较重要的知识点:视口和媒体查询。

2.视口（viewport）

(1).视口概述

视口 (viewport) 代表当前可见的计算机图形区域。在 Web 浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI，菜单栏等——即指你正在浏览的文档的那一部分。我们该如何理解这一个视口的概念呢？我们可以把视口看成是在不同的设备上浏览我们编写的页面效果的时候我们能够看见的那一个界面区域。

(2).视口相关代码以及参数说明

视口代码:

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

参数详解以及注意事项

注意事项：
    我们在编写视口的时候可以使用关键字:meta_viewport实现视口的代码快捷生成。
    视口的相关代码需要写在标签<meta></mate>之间。

参数详解
        width:设置layout viewreport的宽度为一个正数或者是字符串"device-width"。

initial-scale:设置用户的初始缩放值为一个数字。

minimum-scale:设置用户的最小缩放值为一个数字。

maximum-scale:设置用户的最大缩放值为一个数字。

user-scalable:是否允许用户进行缩放，值为"no"或"yes",分别表示允许和不允许。

3.媒体查询（@media）

(1).媒体查询概述

媒体查询是一个专门用于适应不同设备的一个利器，通过设置不同的媒介类型和条件定义样式的规则，媒体查询可以使得css准确的控制在不同的设备上内容的显示和不同的样式的显示，使得更加方便的使得开发者写出兼容不同设备的代码。

(2).媒体查询相关的语法

媒体查询的基本语法规则

@media 设备名称 only (选取条件) not (选取条件) and (设备选取条件){

    //css相关样式规则
}

参数说明:

设备名称可选参数如下(节选重点):
    
         all：所有设备
    handheld: 手持设备
       print: 文档打印或打印预览
      screen：彩色电脑屏幕
          tv: 电视
     braille: 盲文
    
------------>这里我们统一指定参数为:all即可

按照上述的媒体查询的代码，其实我们不仅仅需要记住媒体查询的相关语法，还应该记住不同设备的宽度大小，这样方便我们进行设置，那么我们把它总结如下:

常用是三种设备的媒体查询代码:

@media all and (max-width:320px),all and (max-width:480px){

   //手机端的横竖屏
}

@media all and (max-width:768px),all and (max-width:1024px){

   //ipad端的横竖屏
}

注意事项:

1.我们在定义媒体查询的时候只需要定义手机端和ipad端，因为电脑端的我们在开发是时候就是以及写好的。

2.在使用媒体查询的时候需要注意一点就是关键字and ()之间是有一个空格的。

3.在检查所有写的代码准确的情况下，如果还是没有效果，建议可以重启以下浏览器，可能是浏览器的问题导致媒 
  体查询的效果没有实现出来。

4.响应式布局相关知识概述以及案例

(1)、概述

响应式布局是为了解决页面在不同设备上的显示兼容的问题，其设计的理念是基于流动布局、弹性图片、弹性表格、弹性视频和媒体查询等技术的组合，使用百分比布局创建流动的弹性界面，同时使用媒体查询来显示元素的变动范围，两者组合构成了响应式设计的核心。

下面一起来写一个响应式布局的实例，并把我们学习的两个重点知识运用到里面。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
			body{
				font-size: 20px;
				font-family: "宋体";
				color: #00007F;
			}
			
			.containner{
				height: 900px;
				width: 1600px;
				background-color: #c8c8c8;
				margin: 0 auto;
				text-align: center;
			}
			
			.head{
				height: 100px;
				width: 1600px;
				background-color: #aaff00;
				margin-bottom: 10px;
			}
			.content{
				height: 690px;
				width: 1600px;
			}
			.content .content-left{
				float: left;
				height: 690px;
				width: 400px;
				background-color: #00aaff;
			}
			
			.content .content-right{
				float: right;
				height: 690px;
				width: 1190px;
				background-color: #ff0000;
			}
			
			.foot{
				height: 90px;
				width: 1600px;
				background-color: #00aa7f;
				margin-top: 10px;
			}
			
			/**媒体查询实现不同设备的不同显示**/
			/*手机端不显示中部左侧的导航栏*/
			@media  all and (max-width:320px), all and (max-width:480px){
				.content-left{
					display: none;
				}
			}
			
			/*ipad端显示内容的时候头部头部显示为深绿色,底部显示为深褐色*/
			@media  all and (max-width:768px), all and (max-width:1024px){
				.head{
					background-color: #007400;
				}
				
				.foot{
					background-color: #9f6a00;
				}
			}
</style>
<body>
   <div class="containner">
	  <div class="head">
		 这是头部
	  </div>
	  <div class="content">
		 <div class="content-left">
			左侧导航栏
		 </div>
		 <div class="content-right">
		    右侧导航栏
		 </div>
	   </div>
	   <div class="foot">
			这是底部
	   </div>
    </div>
</body>

电脑端效果: