响应式布局的实现

最新推荐文章于 2024-06-13 09:59:43 发布

背着吉他的蝙蝠女侠

最新推荐文章于 2024-06-13 09:59:43 发布

阅读量303

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/echokkk/article/details/78443809

版权

css 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

响应式布局的实现方式有很多种，我们这里先介绍几种实现响应式布局的方式，然后着重介绍的是如何使用媒体查询实现响应式布局。

方式一：使用媒体查询。注意在使用媒体查询的时候，and与前后的小括号空一个空格，如果不空格的话，会报错。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body,html,div {
			width: 100%;
			height: 100%;
		}
		@media screen and (min-width: 720px) {
			div {
				background: red;
			}
		}
		@media screen and (max-width: 720px) and (min-width: 500px) {
			div {
				background: pink;
			}
		}
		@media screen and (max-width: 500px) {
			div {
				background: yellow;
			}
		}
	</style>
</head>
<body>
	<div>看看颜色你变不变</div>
</body>
</html>

方式二：使用rem作为单位。首先是给html标签设置一个字体大小，然后在其他标签内使用rem单位就可以了，比如：假如html标签字体大小设置的为12px，那么其他标签如果设置为1rem就相当于12px，如果是2rem，那么就相当于24rem。

方式三：使用百分比设置宽度高度即可

方式四：使用弹性盒子进行布局

方式五：使用boostrap进行布局即可。

背着吉他的蝙蝠女侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局的实现

响应式布局的实现方式有很多种，我们这里先介绍几种实现响应式布局的方式，然后着重介绍的是如何使用媒体查询实现响应式布局。方式一：使用媒体查询。注意在使用媒体查询的时候，and与前后的小括号空一个空格，如果不空格的话，会报错。代码如下： Document * { margin: 0; padding: 0; } body,html,div { wid
复制链接

扫一扫

专栏目录