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

36fa49128badd7c5e3a6858ecabf3fe7.png

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

响应式所具有的特点

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>

页面效果:

578e366c05148b5bb2bc245f2679f05e.png
  • 媒体特性:
媒体特性描述
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之间是默认的 */

/* 竖屏的时候满足 */

58a476158eb13b53b13f02e0a087a67b.png

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

/* 竖屏的时候满足 */

cbf5b958746fee448f8505b2121fb036.png

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

/* 横屏的时候满足 */

9ab3e2b13547851341249a15591960b1.png

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

/* 竖屏的时候满足 */

084e88cb9103cb3136f5e4dc471a4299.png


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

622be55b0b515dd6fc3b4387aebb1ddc.png

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

8f5b8efca029874d097f14aa7ba3c1b4.png
  • 逻辑运算符:
逻辑运算符用来做条件判断
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>

页面效果:

/* 默认样式 */

cb93801d19c3818ad0e3dbb293b16b8f.png

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

a4b88e36ce91a2c94ab6efba6ec65347.png

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

7a974152f99ffee55fb47fcb6d782bb2.png

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

556330e61be8f382d89fae0368220701.png

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

7b02ac82ca9383d7d7f69f6cb1ab436b.png

响应式的例子:

<!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>

扩展:

@规则描述
@chartset定义编码
@import引入css文件(css模块化)
@font-face自定义字体
@keyframesanimation里的关键帧
@media媒体查询
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值