老师我的样式怎么加载不到 也不报错
来源：3-3 通用适配应用--头部header
慕标5156652
2020-08-02 17:55:54
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maxinum-scale=1,mininum-scale=1,user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header class="header-contaner">
<div class="navbar">
<div class="navbar-left">
<i class="iconfont "></i>
</div>
<div class="navbar-center">
<div class="searchBox">
<div class="searchBox-prepend">
<i class="iconfont "></i>
</div>
<input type="text" class="searchBox-input" placeholder="开学季有礼，好货五折起">
<div class="searchBox-append">
<i class="iconfont "></i>
</div>
</div>
</div>
<div class="navbar-right">
<i class="iconfont "></i>
</div>
</div>
</header>
<script src="js/flexible.js"></script>
</body>
</html>
bace.css部分
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-size: 12px;
color: #5d655b;
}
a{
font-size: 12px;
color: #686668;
text-decoration: none;
}
input{
font-size: 12px;
}
li{
list-style: none;
}
img{
vertical-align: top;
border: none;
width: 100%;
}
.box{
height: 200px;
width: 200px;
background-color: red;
}
index.js部分
html,
body {
width: 100%;
height: 100;
}
.header-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 2.5rem;
background-color: rgba(222, 24, 27, 0.9);
z-index: 1000;
}
.navbar {
display: flex;
height: 100%;
}
.navbar-left,
.navbar-center,
.navbar-right {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.navbar-right,
.navbar-left {
width: 2.2rem;
}
.navbar-center{
flex: 1;
}
.navbar-right .iconfont,
.navbar-left .iconfont{
color: #fff;
font-size: 1.2rem;
}
flexible.js部分
(function () {
"use strict";
// dpr->scale=1/P
// 可要可不要
var maxWidth=540,minWidth=320
var docEl = document.documentElement;
var viewportEl=document.querySelector('meta[name="viewport"]');
var dpr=window.devicePixelRatio || 1;
dpr=dpr>=3?3:(dpr>=2?2:1);
docEl.setAttribute("data-dpr",dpr);
var scale=1/dpr;
var content="width=device-width, initial-scale="+scale+",maxinum-scale="+scale+",mininum-scale="+scale+",user-scalable=no";
if(viewportEl){
viewportEl.setAttribute("content",content);
}else{
viewportEl=document.createElement("meta");
viewportEl.setAttribute("name","viewport");
viewportEl.setAttribute("content",content);
document.head.appendChild(viewportEl);
}
setRemUnit();
window.addEventListener("resize", setRemUnit);
function setRemUnit() {
var docEl = document.documentElement;
var radio = 18.75;
var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;
console.log(viewWidth);
//可要可不要 主要作用是 屏幕缩小或者放大到一定范围 就不再改变
if(maxWidth && (viewWidth/dpr>maxWidth)){
viewWidth=maxWidth*dpr;
}else if(minWidth && (viewWidth/dpr<minWidth)){
viewWidth=minWidth*dpr;
}
docEl.style.fontSize = viewWidth / radio + "px";
}
})();
1回答
-
慕标5156652
提问者
2020-08-02
不用了 是我有个地方写错了
0
相似问题