收藏
PHPz批改状态：合格
老师批语：
<!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><div class="box"></div><div class="box"></div><style>.box {width: 200px;height: 200px;background-color: blueviolet;border: 10px solid rgb(230, 238, 195);padding: 10px;background-clip: content-box;box-sizing: border-box;margin: 20px;}</style><style>body {background-color: rgb(228, 174, 219);}@media (max-width: 400px) {body {background-color: rgb(241, 230, 208);}}</style></body></html></body></html>
<!-- 实例演示媒体查询 --><!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>Document</title></head><body><button class="btn samll">btn1</button><button class="btn middle">btn2</button><button class="btn large">btn3</button><style>html {font-size: 10px;}.btn {background-color: seagreen;color: white;border: none;outline: none;}.btn:hover {cursor: pointer;opacity: 0.8;transition: 0.3s;padding: 0.4rem 0.8rem;}.btn.small {/* font-size: 12px; */font-size: 1.2rem;}.btn.middle {/* font-size: 16px; */font-size: 1.6rem;}.btn.large {/* font-size: 18px; */font-size: 1.8rem;}/* 媒体查询 */@media (max-width: 374px) {html {font-size: 12px;}}/* 374px - 414px 之间 */@media (min-width: 375px) and (max-width: 413px) {html {font-size: 14px;}}/* >414px 之间 */@media (min-width: 414px) {html {font-size: 16px;}}</style></body></html>
<style>html {font-size: 10px;}div {font-size: 30px;}div span {font-size: 2em;}</style>
<style>html {font-size: 10px;}div {font-size: 30px;}div span {font-size: 2rem;}</style>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
