媒体查询
设定显示元素
设置移动端不同宽度时的字体显示设置
<html>
<head>
<title>媒体查询</title>
</head>
<body>
<button class="btn small">按钮1</button>
<button class="btn middle">按钮2</button>
<button class="btn large">按钮3</button>
<style>
html{
字体大小
font-size:100px;
}
.btn{
底色
bcakground-color:aquamarine;
字体颜色
color:blue;
}
媒体查询展示：
在移动端宽度在一定值时，相应字体大小的设置
@media (max-width:375px){
html{font-size:100px;}
}
@media (min-width:375px) and (max-width:414px){
html{font-size:120px;}
}
@media(min-width:414px){
html{font-size:140px;}
}
媒体查询的顺序：
移动端：从小到大
PC端：从大到小
</style>
</body>
</html>