<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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: 10px;}.btn{background-color: seagreen;color:white;border: none;outline: none;}.btn:hover{cursor: pointer;opacity: 0.7;transition: 0.3s;padding: 0.4rem 0.8rem;}.btn.small{font-size: 1.2rem;}.btn.middle{font-size: 1.6rem;}.btn.large{font-size: 2rem;}/* 只要动态修改rem，就可以动态改变按钮大小 *//* 方案1：移动优先 *//* 375-414之间做主要参考 */@media (max-width:374px){html{font-size:12px;}}/* 375-414之间做主要参考 */@media only screen and (min-width:375px) and (max-width:414px){html{font-size:14px;}}@media (min-width:415px){html{font-size:16px;}}</style></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
