收藏
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><!-- 阿里矢量图 class --><linkrel="stylesheet"href="//at.alicdn.com/t/font_2825039_dkubvn1ci8o.css"/></head><body><button class="btn small">按键1</button><button class="btn middle">按键2</button><button class="btn large">按键3</button><!-- 演示class矢量图,用font class --><!-- 块元素里面放入 iconfont class 才生效 --><div class="iconfont class"><div class="icon-kefuzixunhui"></div><div class="icon-zan"></div></div></body><style>:root {font-size: 10px;}.btn {background-color: rgb(243, 38, 72);color: #fff;border: none;/* outline: none; */}.btn:hover {/* 移动显示小手 */cursor: pointer;/* 透明度 */opacity: 0.7;transition: 0.8s;}.btn.small {font-size: 1rem;}.btn.middle {font-size: 1.2rem;}.btn.large {font-size: 1.4rem;}/* 小于375px,1rem = 12px */@media (max-width: 375px) {:root {font-size: 12px;}}/* 大于375px切小于415px 1rem = 14px */@media (max-width: 415px) and (min-width: 375px) {:root {font-size: 14px;}}/* 给予大小宽度也可以用font-size来计算 */.icon-kefuzixunhui {font-size: 1.5rem;}</style></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
