收藏
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><link rel="stylesheet" href="css/zuoye1.css"></head><body><!--使用大尺寸font-size-b--><span class="iconfont icon-icon-wangluo font-size-b">111</span><!--使用小尺寸font-size-s--><span class="iconfont icon-icon-wangluo font-size-s">111</span></body></html>
<--zuoye1.css-->//引入字体库文件的css@import url('font_icon/iconfont.css');//自定义尺寸//大尺寸.font-size-b{font-size: 35px;color: red;}//小尺寸.font-size-s{font-size: 10px;color: red;}
<!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><link rel="stylesheet" href="css/zuoye.css"></head><body><button class="btn small">btn1</button><button class="btn middle">btn2</button><button class="btn large">btn3</button></body></html>
<--zuoye.css-->html{font-size: 10px;}.btn{outline: none;border: none;color: white;background-color: seagreen;}.small{ font-size: 1.2rem;}.middle{font-size: 1.6rem;}.large{font-size: 2rem;}/* 大屏幕 ：大于等于1200px*/@media (min-width: 1200px) {html{ font-size: 80px;}}/*默认*/@media (min-width: 980px){html{font-size: 60px; }}/* 平板电脑和小屏电脑之间的分辨率 */@media (min-width: 768px) and (max-width: 979px) {html{ font-size: 50px; }}/* 横向放置的手机和竖向放置的平板之间的分辨率 */@media (max-width: 767px) {html{font-size: 40px;}}/* 横向放置的手机及分辨率更小的设备 */@media (max-width: 480px) {html{font-size: 30px;}}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
