<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- 第一步 视口设置 -->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta name="description" content="不超过150个字符"/>
<meta name="keywords" content=""/>
<title>个人中心</title>
<!-- 第二部 格式化css -->
<link rel="stylesheet" href="./css/base.css">
<!-- 第三步 flexible.js 引入 -->
<script src="./js/flexible.js"></script>
<style>
.header {
width: 100%;
height: 0.44rem;
font-size: 0.17rem;
color: #fff;
text-align: center;
line-height: 0.44rem;
background-color: #313131;
}
/* .box{
width: 100px;
height: 100px;
background-color: #f00;
} */
/* html{
font-size: 50px;
} */
@media screen and (width:375px) {
html {
font-size: 100px;
}
}
@media screen and (width:414px) {
html {
font-size: 125px;
}
}
/* .box{
width: 1rem;
height: 1rem;
background-color: #f00;
} */
/* 1rem = 100px
?rem = 90px */
.box {
width: 0.9rem;
height: 0.9rem;
background-color: #f00;
}
</style>
</head>
<body>
<div class="box"></div>
<!-- 顶部状态栏 -->
<header class="header">
</header>
<!-- 顶部状态栏 -->
<!-- 内容区域 -->
<main></main>
<!-- 内容区域 -->
<!-- 顶部导航栏 -->
<footer></footer>
<!-- 底部导航栏 -->
</body>
</html>