收藏
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" /><!-- 引入css样式表 --><link rel="stylesheet" href="demo.css" /><title>引入字体图标</title></head><body><iframe frameborder="1" name="content"></iframe><div><a href="www.baidu.com" target="content"><span class="iconfont icon-shouye"></span></a><span class="iconfont icon-fenlei"></span><span class="iconfont icon-icon03"></span></div></body></html>
/* 引入第三方字体 */@import url("font_icon/iconfont.css");* {margin: 0;padding: 0;}html {/* 设置根的字体大小 */font-size: 10px;}div .iconfont {/* 3rem,指的是根字体大小的3倍 */font-size: 3rem;margin: 3rem;}div {margin: 1rem;}
<!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>实例演示媒体查询(PC优先模式)</title><style>/* 设置根原素字体大小为5px */html {font-size: 5px;}button.btn:hover {cursor: pointer;opacity: 0.7;transition: 0.8s;}body > button:nth-of-type(1) {font-size: 1rem;}body > button:nth-of-type(2) {font-size: 1.5rem;}body > button:last-of-type {font-size: 2rem;}/* 2. PC优先: 先从最大屏的设备进行适配 *//* 1000, 800 600 450 350 */@media (min-width: 1000px) {html {font-size: 25px;}}@media (max-width: 999px) and (min-width: 800px) {html {font-size: 20px;}}@media (max-width: 799px) and (min-width: 600px) {html {font-size: 15px;}}@media (max-width: 599px) and (min-width: 450px) {html {font-size: 10px;}}@media (max-width: 449px) and (min-width: 350px) {html {font-size: 5px;}}</style></head><body><button class="btn">button1</button><button class="btn">button2</button><button class="btn">button3</button></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
