响应式布局的实现方式有很多种,我们这里先介绍几种实现响应式布局的方式,然后着重介绍的是如何使用媒体查询实现响应式布局。
方式一:使用媒体查询。注意在使用媒体查询的时候,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进行布局即可。