收藏
PHPz批改状态：合格
老师批语：
修改布局视图等于视觉视图：width=device-width.理想视图等于视觉视图（初始化时布局视图比视觉视图等于一）：initial-scale=1.0px不能使用，因为px与设备相关：用rem+vw实现自适应布局：font-size:cacl(100vw/3.75)
<!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><!-- 页眉 --><header><div class="top">页眉</div></header><!-- 主体 --><main><div class="navs" style="height: 1800px;">主体888888888888888888888888888888888</div></main><!-- 页脚 --><footer><div class="footer">页脚</div></footer><style>* {margin: 0;padding: 0;box-sizing: border-box;}/* 链接 */a {text-decoration: none;color: #555;}/* 列表 */li {list-style: none;}:root {font-size: calc(100vw / 3.75);}body {font-size: 0.12rem;color: #333;/* max-width: 750px;min-width: 320px; */margin: auto;background-color: #f4f4f4;}@media screen and (max-width:320px) {:root{font-size: 85px;}}@media screen and (min-width:640px) {:root{font-size: 170px;}}header .top{width: 100vw;position: fixed;background-color: aqua;top: 0;left: 0;right: 0;z-index: 99;}footer .footer{width: 100vw;position: fixed;background-color: aqua;bottom: 0;left: 0;right: 0;z-index: 99;}main .navs{background-color: orangered;position: absolute;top: .16rem;height:auto;}</style></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
