bootstrap 屏幕高度_Bootstrap的响应式原理

最新推荐文章于 2023-10-08 17:47:07 发布

weixin_39847034

最新推荐文章于 2023-10-08 17:47:07 发布

阅读量1.3k

点赞数

文章标签： bootstrap 屏幕高度

本文链接：https://blog.csdn.net/weixin_39847034/article/details/112125682

版权

响应式是指使网页适应不同尺寸、不同分辨率的设备。

响应式所具有的特点

1、网页的宽度自动调整。

2、尽量少用绝对宽度。

3、字体要使用rem、em做为单位。

4、布局要使用浮动、弹性布局。

响应式界面的四个层次

1、同一页面在不同大小和比例上看起来都应该是舒适的；

2、同一页面在不同分辨率上看起来都应该是合理的；

4、同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的；

5、同一页面在不同类型的设备（手机、平板、电脑）上，交互方式应该是符合习惯的。

响应式界面的基本规则

1、可伸缩的内容区块：内容区块的在一定程度上能够自动调整，以确保填满整个页面。

2、可自由排布的内容区块：当页面尺寸变动较大时，能够减少/增加排布的列数。

3、适应页面尺寸的边距：到页面尺寸发生更大变化时，区块的边距也应该变化。

4、能够适应比例变化的图片：对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用。

5、能够自动隐藏/部分显示的内容：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏。

6、能自动折叠的导航和菜单：展开还是收起，应该根据页面尺寸来判断。

7、放弃使用px作为尺寸单位：使用rem、em做为单位。

使用媒体查询方法来解释Bootstrap的响应式原理

媒体查询@media：根据一个或多个基于设备类型、具体特点和环境来应用样式。

参考网站：https://drafts.csswg.org/mediaqueries/

媒体类型：

all	所有设备
print	打印机设备
screen	彩色的电脑屏幕
speech	听觉设备（针对有视力障碍的人士，可以把页面的内容以语音的方式呈现的设备）

注意：tty、tv、projection、handheld、braille、embossed、aural等几种类型在媒体查询4中已经废弃。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>媒体类型</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background: green;
		}

		/* 所有设备 */
		@media all {
			div {
				width: 400px;
				height: 400px;
				background: grey;
			}
		}

		/* 打印机设备 */
		@media print {
			div {
				font-size: 80px;
				width: 400px;
				height: 400px;
				background: yellow;
			}
		}

		/* 彩色的电脑屏幕 */
		@media screen {
			div {
				width: 300px;
				height: 300px;
				background: pink;
			}
		}

		/* 听觉设备 */
		@media speech {
			div {
				width: 300px;
				height: 300px;
				background:red;
			}
		}
	</style>
</head>

<body>
	<div>媒体类型</div>
</body>

</html>

页面效果：

媒体特性：

媒体特性	描述
width	宽度
min-width	最小宽度，宽度只能比这个大
max-width	最大的宽度，宽度只能比这个小
height	高度
min-height	最小高度，高度只能比这个大
max-height	最大的高度，高度只能比这个小
orientation	方向
landscape	横屏（宽度大于高度）
portrait	竖屏（高度大于宽度）
aspect-ratio	宽度比
-webkit-device-pixel-ratio	像素比（webkit内核的私有属性）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>媒体特性</title>
		<style>
			/* 400-500之间是默认的 */
			div{
				width: 100px;
				height: 100px;
				background: red;
			}

			/* 屏幕尺寸大于500的时候满足 */
			@media (min-width:500px){
				div{
					background: green;
				}
			}

			/* 屏幕尺寸小于400的时候满足 */
			@media (max-width:400px){
				div{
					background: blue;
				}
			}

			/* 横屏的时候满足 */
			@media (orientation:landscape){
				div{
					width: 400px;
					height: 100px;
				}
			}

			/* 竖屏的时候满足 */
			@media (orientation:portrait){
				div{
					width: 100px;
					height: 400px;
				}
			}

			/* 宽高比为4：3的时候满足，800*600的时候是4：3 */
			@media (aspect-ratio:4/3){
				div{
					border: 10px solid #000;
				}
			}

			/* 当像素比为2的时候，满足 */
			@media (-webkit-device-pixel-ratio:2){
				div:after{
					content: 'aaa';
					font-size: 50px;
				}
			}
		</style>
	</head>
	<body>
		<div>媒体特性</div>
	</body>
</html>

页面效果：

/* 400-500之间是默认的 */

/* 竖屏的时候满足 */

/* 屏幕尺寸大于500的时候满足 */

/* 竖屏的时候满足 */

/* 屏幕尺寸大于500的时候满足 */

/* 横屏的时候满足 */

/* 屏幕尺寸小于400的时候满足 */

/* 竖屏的时候满足 */

/* 宽高比为4：3的时候满足，800*600的时候是4：3 */

/* 当像素比为2的时候，满足 */

逻辑运算符：

逻辑运算符	用来做条件判断
and	合并多个媒体查询（并且的意思）
,	匹配某个媒体查询（或者的意思）
not	对媒体查询结果取反
only	仅在媒体查询匹配成功后应用样式（防范老旧浏览器）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>逻辑运算符</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background: red;
			}

			/* 屏幕的尺寸比700大的时候以及横屏的时候满足 */
			@media all and (min-width:700px) and (orientation: landscape){
				div{
					background: green;
				}
			}

			/* 屏幕尺寸比600小，或者屏幕为横屏的时候满足 */
			@media (max-width:600px),(orientation: portrait){
				div{
					background: pink;
				}
			}

			/* 屏幕的尺寸要大于900的时候，整个才满足 */
			@media not all and (max-width:900px){
				div{
					background: blue;
				}
			}

			/* 屏幕的尺寸要大于1000的时候，才满足 */
			@media only screen and (min-width:1000px){
				div{
					background: grey;
				}
			}
		</style>
	</head>
	<body>
		<div>逻辑运算符</div>
	</body>
</html>

页面效果：

/* 默认样式 */

/* 屏幕的尺寸比700大的时候以及横屏的时候满足 */

/* 屏幕尺寸比600小，或者屏幕为横屏的时候满足 */

/* 屏幕的尺寸要大于900的时候，整个才满足 */

/* 屏幕的尺寸要大于1000的时候，才满足 */

响应式的例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>响应式的例子</title>
		<style>
			body{
				margin: 0;
			}
			div{
				width: 100px;
				height: 100px;
				background: green;
				float: left;
				border: 1px solid #000;
				box-sizing: border-box;
			}
			/* <400，显示1个 */
			@media all and (max-width:400px){
				div{
					width: 100%;
				}
			}

			/* 400-600，显示2个 */
			@media all and (min-width:400px){
				div{
					width: 50%;
				}
			}

			/* 600-800，显示3个 */
			@media all and (min-width:600px){
				div{
					width:33.3%;
				}
			}

			/* 800-1000，显示4个 */
			@media all and (min-width:800px){
				div{
					width:25%;
				}
			}

			/* 1000以上，显示5个 */
			@media all and (min-width:1000px){
				div{
					width: 20%;
				}
			}
		</style>
	</head>
	<body>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
	</body>
</html>

扩展：