博客列表 >前端开发20221025-2

前端开发20221025-2

P粉114035831
P粉114035831原创
2022年10月29日 23:14:36348浏览

媒体查询

设定显示元素

设置移动端不同宽度时的字体显示设置

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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议