响应式布局

最新推荐文章于 2022-08-23 20:12:31 发布
原创 最新推荐文章于 2022-08-23 20:12:31 发布 · 274 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #css #bootstrap

本文探讨了两种网页布局技术：弹性布局和响应式布局。首先介绍了浮动+百分比布局的方式，虽然能随浏览器大小变化，但存在局限。接着详细讲解了Flex弹性盒布局，它更优地解决了元素排列和高度问题。最后，文章通过媒体查询展示了如何实现响应式设计，以适应不同屏幕尺寸的设备。

弹性布局

当我们制作网页时，当浏览器宽度大于页面的宽度时，在网页的右边会出现多余的空白。如果缩小浏览器的宽度，网页的内容会被遮挡一部分，如果想要查看网页全貌就需要拖动滚动条，但是拖动滚动条查看网页的操作大大降低了用户体验。

在这里插入图片描述
浮动+百分比布局
在这里插入图片描述
示例：

<head lang="en">
    <meta charset="UTF-8">
    <title>固定布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }     

        .box {
            width: 100%;
			height: 480px;
            border: 1px solid #000000;
            padding: 10px;
        }

        aside {
            width: 28%;
            float: left;
            background: red;
            padding: 10px;
        }      

        article {
            margin-left: 10px;
            width: 68%;
            float: left;
            background: yellow;
        }

    </style>
</head>
	<body>
		<div class="box clear">
			<!--省略部分代码-->
			<aside>
				<br><br><br><br><br><br><br><br><br>
			</aside>
			<article>
				<br><br><br><br><br><br><br><br><br><br><br>
				<br><br><br><br><br><br><br><br><br><br><br>
			</article>
		</div>
	</body>

在浏览器中浏览：
放大
在这里插入图片描述
缩小浏览器窗口
在这里插入图片描述
使用了浮动+百分比的布局方式，网页显示的内容不在受浏览器宽度影响，此时网页会随着浏览器的伸展而伸展，随着浏览器的缩小而收缩。

注意：也有缺点，也会出现少数空白，网页也不可以无限收缩，当收缩到最小宽度时，article元素会排到下一行。

Flex弹性盒布局
请添加图片描述
请添加图片描述

使用步骤
在这里插入图片描述
示例：

<head lang="en">
    <meta charset="UTF-8">
    <title>固定布局</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }     

        .box {
        	display: flex; /*声明当前标签作为Flex容器*/
            border: 1px solid #000000;
            padding: 10px;
        }

        aside {
            width: 28%;
            background: red;
            padding: 10px;
        }      

        article {
            margin-left: 10px;
            padding: 10px;
          	width: 68%;
            background: yellow;
        }

    </style>
</head>
	<body>
		<div class="box clear">
			<!--省略部分代码-->
			<aside>
				<br><br><br><br><br><br><br><br><br>
			</aside>
			<article>
				<br><br><br><br><br><br><br><br><br><br><br>
				<br><br><br><br><br><br><br><br><br><br><br>
			</article>
		</div>
	</body>

在浏览器中访问
放大
在这里插入图片描述
缩小浏览器
在这里插入图片描述
此方式相比浮动+百分比布局方式来说，没有对两个子元素设置浮动和高度，但是结果这两个元素排到了一行，且高度一致，同时还避免了article元素下方的留白现象，缩小浏览器也不会换行。

容器属性：设置给父元素的属性。
请添加图片描述
flex-direction：决定主轴的方向，即子元素在父容器中的位置：
在这里插入图片描述

示例

  .box {
        	display: flex; /*声明当前标签作为Flex容器*/
        	flex-direction: row;
			height: 480px;
            border: 1px solid #000000;
            padding: 10px;
        }

        aside {
            width: 28%;
            background: red;
            padding: 10px;
        }      

        article {
            margin-left: 10px;
            width: 68%;
            background: yellow;
        }

    </style>
</head>
	<body>
		<div class="box clear">
			<!--省略部分代码-->
			<aside>
				<br><br><br><br><br><br><br><br><br>
			</aside>
			<article>
				<br><br><br><br><br><br><br><br><br><br><br>
				<br><br><br><br><br><br><br><br><br><br><br>
			</article>
		</div>
	</body>

默认
在这里插入图片描述
从后往前排
修改样式：

   .box {
        	display: flex; /*声明当前标签作为Flex容器*/
        	flex-direction: row-reverse;
			height: 480px;
            border: 1px solid #000000;
            padding: 10px;
        }

在这里插入图片描述
纵向排列
修改代码

  .box {
        	display: flex; /*声明当前标签作为Flex容器*/
        	flex-direction: column;
			height: 480px;
            border: 1px solid #000000;
            padding: 10px;
        }

在这里插入图片描述
从后往前排，最后一项排在上面
修改样式

  .box {
        	display: flex; /*声明当前标签作为Flex容器*/
        	flex-direction: column-reverse;
			height: 480px;
            border: 1px solid #000000;
            padding: 10px;
        }

在这里插入图片描述
flex-wrap属性：用来定义子元素在一条轴线下排不下时应该如何换行，
在这里插入图片描述
示例:

 <head>
    <title>2_伸缩换行.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <style type="text/css">
    .divItem{
    width: 60px;
    /*height: 25px;  若Flex项目高度固定,无法实现侧轴拉伸效果 */ 
    border: 2px red solid;
    }
    [class^='flex']{
    border: 2px blue solid;
    width: 250px;
    height: 150px;
    margin: 5px 3px;
    float: left; /* 不需要此代码,此处只是为了方便看效果 */
    }
    
 		.flex1{
 			display: flex;
 			flex-wrap: nowrap;
 		}
 		.flex2{
 			display: flex;
 			flex-wrap: wrap;
 		}
 		.flex3{
 			display: flex;
 			flex-wrap: wrap-reverse;
 		}
    </style>
  </head>
  
  <body>
  	<div class="flex1">
  		<div class="divItem">div1</div>
  		<div class="divItem">div2</div>
  		<div class="divItem">div3</div>
  		<div class="divItem">div4</div>
  		<div class="divItem">div5</div>
  		<div class="divItem">div6</div>
  	</div>
  	
  	<div class="flex2">
  		<div class="divItem">div1</div>
  		<div class="divItem">div2</div>
  		<div class="divItem">div3</div>
  		<div class="divItem">div4</div>
  		<div class="divItem">div5</div>
  		<div class="divItem">div6</div>
  	</div>
  	
  	<div class="flex3">
  		<div class="divItem">div1</div>
  		<div class="divItem">div2</div>
  		<div class="divItem">div3</div>
  		<div class="divItem">div4</div>
  		<div class="divItem">div5</div>
  		<div class="divItem">div6</div>
  	</div>
  	
  </body>

运行结果
在这里插入图片描述
Justify-content属性
在这里插入图片描述

示例

   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <style type="text/css">
    .divItem{
    width: 60px;
    /*height: 25px;  若Flex项目高度固定,无法实现侧轴拉伸效果 */ 
    border: 2px red solid;
    }
    [class^='flex']{
    border: 2px blue solid;
    width: 250px;
    height: 150px;
    margin: 5px 3px;
    float: left; /*不需要此代码,此处只是为了方便看效果 */
    }
    
    .flex1{
    	display: flex;
    	justify-content: flex-start;/*默认值,从主轴的起点开始排列*/
    }
  	.flex2{
  		display: flex;
  		justify-content: flex-end;
  	}
  	.flex3{
  		display: flex;
  		justify-content: center;
  	}
  	.flex4{
  		display: flex;
  		justify-content: space-between;
  	}
  	.flex5{
  		display: flex;
  		justify-content: space-around;
  	}
  	
    </style>
  </head>
  
  <body>
  	<div class="flex1">
  		<div class="divItem">div1</div>
  		<div class="divItem">div2</div>
  		<div class="divItem">div3</div>
  	</div>
  	<div class="flex2">
  		<div class="divItem">div1</div>
  		<div class="divItem">div2</div>
  		<div class="divItem">div3</div>
  	</div>
  	<div class="flex3">
  		<div class="divItem">div1</div>
  		<div class="divItem">div2</div>
  		<div class="divItem">div3</div>
  	</div>
  	<div class="flex4">
  		<div class="divItem">div1</div>
  		<div class="divItem">div2</div>
  		<div class="divItem">div3</div>
  	</div>
  	<div class="flex5">
  		<div class="divItem">div1</div>
  		<div class="divItem">div2</div>
  		<div class="divItem">div3</div>
  	</div>
  </body>

运行结果
在这里插入图片描述
align-items属性
在这里插入图片描述
示例

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <style type="text/css">
    .divItem{
    width: 60px;
    /*height: 25px;  若Flex项目高度固定,无法实现侧轴拉伸效果 */ 
    border: 2px red solid;
    }
    [class^='flex']{
    border: 2px blue solid;
    width: 250px;
    height: 150px;
    margin: 5px 3px;
    float: left; /* 不需要此代码,此处只是为了方便看效果 */
    }
    
    .flex1{
    	display: flex;
    	align-items: stretch;
    }
   	.flex2{
   		display: flex;
   		align-items: flex-start;
   	}
   	.flex3{
   		display: flex;
   		align-items:flex-end;
   	}
   	.flex4{
   		display: flex;
   		align-items:center;
   	}
   	.flex5{
   		display: flex;
   		align-items:baseline;
   	}
    </style>
  </head>
  
  <body>
  	<div class="flex1">
  		<div class="divItem">div1</div>
  		<div class="divItem">div2</div>
  		<div class="divItem">div3</div>
  	</div>
  	<div class="flex2">
  		<div class="divItem">div1</div>
  		<div class="divItem">div2</div>
  		<div class="divItem">div3</div>
  	</div>
  	<div class="flex3">
  		<div class="divItem">div1</div>
  		<div class="divItem">div2</div>
  		<div class="divItem">div3</div>
  	</div>
  	<div class="flex4">
  		<div class="divItem">div1</div>
  		<div class="divItem">div2</div>
  		<div class="divItem">div3</div>
  	</div>
  	<div class="flex5">
  		<div class="divItem">div1</div>
  		<div class="divItem" style="font-size: 30px;">div2</div>
  		<div class="divItem">div3</div>
  	</div>
  </body>

运行结果
在这里插入图片描述

响应式布局

在这里插入图片描述

媒体查询
媒体查询可以针对不同屏幕尺寸设置不同的样式，使页面在不同终端设备下达到不同的渲染效果。
在这里插入图片描述
媒体查询引入方式：”
在这里插入图片描述

媒体特性
在这里插入图片描述

关键词
在这里插入图片描述
示例：

   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
    div{
    width: 500px;
    height: 100px;
    border: 2px blue solid;
    border-radius:10px;
    margin: 20px;
    }
    
   	@media all and (min-width:1200px){
   		#div1{
	    	background-color: #0000FF;
	    }
   	}
   	
   	@media screen and (min-width:800px) and (max-width:1000px){
   		#div2{
	    	background-color: deeppink;
	    }
   	}
   	@media screen and (max-width:800px) {
   			#div3{
	    	background-color: red;
	    }
   	}
    </style>
    
    <link rel="stylesheet" href="css/linkCSS.css" media="print and (min-width:1200px)" />
  </head>
  
  <body>
    CSS3媒介类型测试. <br>
    CSS3含有多种媒介类型:<br>
    <!-- 测试all -->
    <div id="div1">all</div>
    <!-- 测试screen -->
    <div id="div2">screen</div>
    <!-- 测试print -->
    <div id="div3">print</div>
    <!-- 测试screen,print -->
    <div id="div4">screen,print</div>
  </body>

屏幕宽度最小为1200px时div1背景颜色为蓝色
在这里插入图片描述
屏幕宽度最小为800最大为1000时div2颜色为粉色
在这里插入图片描述
屏幕宽度为800及800以下的话div3颜色为红色显示
在这里插入图片描述
div4用外部文件方式引入媒体类型仅在使用打印机时有效。

示例：

<html>
	<head>
		<meta charset="UTF-8">
		<title>响应式布局.html</title>
		<style type="text/css">
			div{
				margin: 0px;
				padding: 0px;
			}
			@media screen and (min-width:1200px ) {
				img{
					width: 25%;
					float: left;
				}
			}
			@media screen and (min-width:800px )and (max-width:1200px) {
				img{
					width: 50%;
					float: left;
				}
			}
			@media screen and (max-width:800px ) {
				img{
					width: 100%;
					float: left;
				}
			}
		</style>
	</head>
	<body>
		<div>
			<img src="images/1.jpg" />
			<img src="images/2.jpg" />
			<img src="images/3.jpg" />
			<img src="images/4.jpg" />
		</div>
	</body>
</html>

屏幕宽度大于1200px时
在这里插入图片描述
宽度大于800小于1200px时
在这里插入图片描述
宽度小于800px时
在这里插入图片描述

yananye
关注
基于layui框架响应式布局的一些使用详解
12-13
响应式布局是现代网页设计的关键特性，它使得网站在不同尺寸的设备上，如桌面、平板和手机上，都能提供良好的用户体验。layui是一款优秀的前端框架，它的响应式布局功能简化了这一过程，使得开发者能够快速构建适应...
页面大小与浏览器不适应
weixin_43976654的博客
01-13 1237
页面大小与浏览器不适应 （写样式时没有用百分比，而是用了具体的值，在自己电脑上没有问题，在屏幕大小不一样的电脑上会显得很小，要手动调整大小） 一.改变zoom样式 1.获取浏览器的屏幕宽度 window.screen.width 2.在js中改写css样式 document.body.style.zoom = window.screen.width/1280 （1280为自己电脑的浏览器宽度） 二.修改mata标签属性 <meta name="viewport" content="width=de
响应式布局+bootstra
m0_64492064的博客
03-17 761
移动端响应式布局知识点+bootstrap框架使用
CSS响应式布局
weixin_43218691的博客
08-07 874
前提知识 特殊样式 /*Css3盒子模型*/ box-sizing: border-box; -webkit-box-sizing: border-box; /★点击高亮我们需要清除清除设置为transparent完成透明*/ -webkit-tap-highlight-color: transparent; /★在移动端浏览器默认的外观在ios.上加上这个属性才能给按钮和输入框自定义样式*/ -webkit-appearance: none ; /*禁用长按页面时的弹出菜单*/ img,a { -webk
响应式布局的简单案例
09-24
响应式布局是一种网页设计技术，它能够确保网页在不同设备上具有良好的显示效果，无论是在桌面电脑、平板电脑还是手机上，用户都能获得满意的浏览体验。一个优秀的响应式布局应当能够让网页内容自动适应不同的屏幕...
腾讯全端Bootstrap响应式布局
最新发布
06-07
在创建腾讯全端响应式布局时，我们需要使用如、、、、等语义化标签，以提高网页的可读性和可访问性。 Bootstrap，由Twitter开发并开源的前端框架，提供了丰富的预设样式、组件和JavaScript插件，极大地简化了响应式...
响应式布局原理实现屏幕的大小来进行颜色的变化
weixin_46483221的博客
03-07 453
当页面宽度大于960像素的时候，页面显示红色并且显示computer当页面宽度大于840像素的时候，小于960时，页面显示绿色，并且显示tablet剩下的情况为黄色并且显示为mobile 代码： *<script> window.onresize=function(){ responsive();//网页大小发生改变的时候发生响应 }; responsive();//页面...
响应式布局---基础知识
aurora
10-23 304
响应式布局---基础入门一. 媒体查询(@media) 一. 媒体查询(@media) 媒体查询的含义：根据不同设备屏幕大小来决定页面的样式（不限于布局、样式） 需求：有一个div，要求在同一个页面根据不同的屏幕大小，来展示不同的样式效果。 基本结构： <body> <!-- 概念：为不同屏幕尺寸设定不同的css的样式 --> <div id="dv"></div> </body> style样式： <style>
响应式（自适应）布局
kalinux的博客
10-16 467
1，响应式布局：当浏览器宽度改变时，网页根据宽度变化自动变化成适合人看的布局。比如，当浏览器宽度为1920px时，一排显示6张图片，但是当浏览器宽度为640px时，一排显示3张图片。 2，响应式布局的一些技术点纪录： (1)允许网页的宽度自动的调整 在网页代码的头部，加入一行viewport元标签。  1 &lt;meta name="viewport" content="width=de...
媒体查询&响应式布局
Fray_Zyt的博客
06-28 337
媒体查询： 概念：可根据设备（电脑/手机/终端设备）的尺寸，查询出适配自己的样式，可以根据用户的终端设备配对对应的样式； 共三种样式用媒体查询： 1、外部样式表媒体查询 --- link media="设备类型 and关键字 （这一定要空格） （媒体查询条件）" 2、@import方式 --- <style> @import url(路径) 设备类型 and （媒体查询的条件）； --- <...
Javascript特效：响应式改变页面背景颜色
KaiSarH
12-27 1070
实现JS特效： 随着界面的宽度变化，显示不同的背景颜色。
菜鸟笔记——响应式布局
踏云飞的博客
05-08 678
前不久我的同学和我讨论响应式布局与栅格式布局的关系到底是响应式布局属于栅格式布局，还是栅格式布局属于响应式布局，个人觉得是栅格式布局属于响应式布局。因为之前的响应式布局没有学多少进去，所以我就又重新学了一遍然后写了这个笔记。其实这个响应式布局的入门还挺简单的，响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特...
响应式布局 浏览器适配 浏览器兼容
weixin_55711841的博客
08-23 479
响应式布局 浏览器适配 浏览器兼容
响应式布局 - 元素动态大小变化
小多的博客
11-03 532
rem基础 em 相对于父元素的字体大小来说的 rem 相对于 html元素的字体大小来说的 媒体查询 是CSS3新语法 使用 @media 查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同屏幕尺寸设置不同样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机、Android手机、平板等设备都用得到多媒体查询 语法规范 @media mediatype and|not|only (media feature){ css-code;
自适应网页(响应式布局)+弹性布局
热门推荐
云_飞扬
06-11 1万+
1.自适应网页 1.声明viewport元标签 注：width=device-width 让宽度为设备宽度    initial-scale=1    设置初始缩放比例    user-scalable=no   设置用户是否可以手动缩放 2.使用流式布局    实现方案：float:left      display:inline-block;      弹性布局 displ
html5+css3的第8天 使用工具：HBuilder X
qq_46426476的博客
12-07 251
pc端 固定宽度 移动端 百分比(100%) flex @media 响应式布局: 不能太过于复杂 325px; 媒体查询: @media @media not|only mediatype and (expressions) { CSS 代码…; } 通过判断设备的分辨率 达到差异化布局: max-width: 最大宽度(不超过); min-width: 最小宽度(大于等于); 关键字: only not and … 设备关键字(mediatype) all：所有设备 print： 打印设备 scree
HTML5响应式布局案例解析
在信息技术行业，响应式布局是网页设计中的一种非常重要的技术。它能够使网页在不同的设备（如手机、平板电脑、台式机等）上拥有良好的显示效果，无论这些设备的屏幕尺寸如何。响应式布局通常涉及到HTML、CSS和...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值