Files
ClassContent/历届学生/fontendsix/项目练习/上课项目/rem案例/bao.html
2024-09-27 02:06:13 +08:00

177 lines
7.6 KiB
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>在包河-帖子</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/baohe.css">
</head>
<body>
<div class="header">
<img src="./img/logo.png" alt="">
<div class="open">打开</div>
</div>
<div class="content">
<div class="banner">
<img src="./img/banner.png" alt="">
<div class="page">1/6</div>
</div>
<div class="user_info padding">
<div class="user_wrap">
<img src="./img/user_img.png" alt="">
<div class="user_name">
<div class="title">小纲吉</div>
<div class="time">前天21:12</div>
</div>
</div>
<div class="text">这里是帖子内容这里是帖子内容这里是帖子内容这里是帖子内容这里是帖子内容这里是帖子内容这里是帖子内容这里是帖子内容这里是帖子内容这里是帖子内容这里是帖子内容这里是帖子内容</div>
</div>
<div class="comment">
<div class="title">全部评论</div>
<ul class="comment_list padding">
<li>
<img class="user_ava" src="./img/user_img.png" alt="">
<div class="list_text">
<div class="text_user">
<div class="user_title">
<span>呆小瓜</span>
<div class="zan">
<img src="./img/good.png" alt="">
<span>15</span>
</div>
</div>
<div class="time">刚刚</div>
</div>
<div class="text_content">这里是评论的文字这里是评论的文字这里是评论
的文字这里是评论的文字这里是评论的文字这里
是评论的文字这里是评论的文字</div>
</div>
</li>
<li>
<img class="user_ava" src="./img/user_img.png" alt="">
<div class="list_text">
<div class="text_user">
<div class="user_title">
<span>呆小瓜</span>
<div class="zan">
<img src="./img/good.png" alt="">
<span>15</span>
</div>
</div>
<div class="time">刚刚</div>
</div>
<div class="text_content">这里是评论的文字这里是评论的文字这里是评论
的文字这里是评论的文字这里是评论的文字这里
是评论的文字这里是评论的文字</div>
</div>
</li>
<li>
<img class="user_ava" src="./img/user_img.png" alt="">
<div class="list_text">
<div class="text_user">
<div class="user_title">
<span>呆小瓜</span>
<div class="zan">
<img src="./img/good.png" alt="">
<span>15</span>
</div>
</div>
<div class="time">刚刚</div>
</div>
<div class="text_content">这里是评论的文字这里是评论的文字这里是评论
的文字这里是评论的文字这里是评论的文字这里
是评论的文字这里是评论的文字</div>
</div>
</li>
<li>
<img class="user_ava" src="./img/user_img.png" alt="">
<div class="list_text">
<div class="text_user">
<div class="user_title">
<span>呆小瓜</span>
<div class="zan">
<img src="./img/good.png" alt="">
<span>15</span>
</div>
</div>
<div class="time">刚刚</div>
</div>
<div class="text_content">这里是评论的文字这里是评论的文字这里是评论
的文字这里是评论的文字这里是评论的文字这里
是评论的文字这里是评论的文字</div>
</div>
</li>
<li>
<img class="user_ava" src="./img/user_img.png" alt="">
<div class="list_text">
<div class="text_user">
<div class="user_title">
<span>呆小瓜</span>
<div class="zan">
<img src="./img/good.png" alt="">
<span>15</span>
</div>
</div>
<div class="time">刚刚</div>
</div>
<div class="text_content">这里是评论的文字这里是评论的文字这里是评论
的文字这里是评论的文字这里是评论的文字这里
是评论的文字这里是评论的文字</div>
</div>
</li>
<li>
<img class="user_ava" src="./img/user_img.png" alt="">
<div class="list_text">
<div class="text_user">
<div class="user_title">
<span>呆小瓜</span>
<div class="zan">
<img src="./img/good.png" alt="">
<span>15</span>
</div>
</div>
<div class="time">刚刚</div>
</div>
<div class="text_content">这里是评论的文字这里是评论的文字这里是评论
的文字这里是评论的文字这里是评论的文字这里
是评论的文字这里是评论的文字</div>
</div>
</li>
</ul>
</div>
<div class="all_comment">
打开APP查看全部评论
</div>
</div>
</body>
<script>
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
</html>