-
Notifications
You must be signed in to change notification settings - Fork 0
/
responsive.html
58 lines (46 loc) · 1.55 KB
/
responsive.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.para1{
background-color: blue;
}
.para2{
background-color: brown;
}
.para3{
background-color: greenyellow;
}
@media(min-width:801px)
{
div p{
width: 30%;
float: left;
padding: 10px;
}
}
@media(max-width:600px)
{
body{
background-color: chocolate;
}
}
@media(min-width:600px)and(max-width:800px)
{
body{
background-color: cadetblue;
}
}
</style>
<body>
<div>
<p class="para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquam dolor at orci lobortis mollis. Sed vel maximus metus, in cursus felis. Duis turpis ligula, convallis et interdum sit amet, mollis eu augue.</p>
<p class="para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquam dolor at orci lobortis mollis. Sed vel maximus metus, in cursus felis. Duis turpis ligula, convallis et interdum sit amet, mollis eu augue.</p>
<p class="para3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquam dolor at orci lobortis mollis. Sed vel maximus metus, in cursus felis. Duis turpis ligula, convallis et interdum sit amet, mollis eu augue.</p>
</div>
</body>
</html>