老师帮我看下一下

来源：3-3 通用适配应用--头部header

vivi_li

2020-06-12 15:31:01

有点奇怪设备像素比不一样的花 placehoder里面的文字大小好像是不一样的

图中一个是3 一个是2的像素测量出来不一样

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=no,maximum-scale=0.5,minimum-scale=0.5"/>
<title>移动端适配原理</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/flexible.js"></script>
</head>
<body>
<header class="header-container">
<div class="navBar">
<div class="navBar-left">
<i class="icon-scan iconfont"></i>
</div>
<div class="navBar-center">
<div class="searchBox">
<div class="searchBox-prepend">
<i class="icon-search iconfont"></i>
</div>
<input type="text" class="searchBox-input" placeholder="五折抢购">
<div class="searchBox-append">
<i class="icon-close iconfont"></i>
</div>
</div>
</div>
<div class="navBar-right">
<i class="icon-msg iconfont"></i>
</div>
</div>
</header>
<div class="main-container">
<div class="slider-container"></div>
<div class="nav-container"></div>
<div class="recommend-container"></div>
</div>
<div class="tabBar-container"></div>
</body>
<script src="js/index.js"></script>
</html>

/*布局start*/
html,body{
width: 100%;
height: 100%;
}
/*header*/
.header-container{
height: 2.5rem;
width: 100%;
background-color: rgba(222,24,27,.9);
left: 0;
top: 0;
position: fixed;
z-index: 1000;
}
/*布局end*/

/*组件start*/
.navBar{
display: flex;
height: 100%;
}
.navBar-left,
.navBar-center,
.navBar-right{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.navBar-left,
.navBar-right{
width: 2.2rem;
}
.navBar-center{
flex: 1;
}
.navBar-left .iconfont,
.navBar-right .iconfont{
color: #fff;
font-size: 1.2rem;
}
/*searchBox*/
.searchBox{
display: flex;
width: 100%;
height: 1.6rem;
border-radius: .8rem;
background-color: #fff;
}
.searchBox-prepend,
.searchBox-input,
.searchBox-append{
height: 100%;
}
.searchBox-prepend,
.searchBox-append{
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
width: 1.6rem;
}
.searchBox-input{
flex: 1;
font-size: 0.35rem;
}
.searchBox .iconfont{
color: #ccc;
font-size: 0.9rem;
font-weight: bold;
}
/*组件end*/

/*内容start*/

/*内容end*/

.main-container{
padding: 2.5rem 0;
background-color: #eee;
}
.slider-container{
height: 9.15rem;
background-color: green;
}
.nav-container{
height: 8.475rem;
background-color: blue;
}
.recommend-container{
height: 50rem;
background-color: pink;
}
.tabBar-container{
height: 2.5rem;
background-color: #fff;
}
html,body{
height: 100%;
width: 100%;
}
.tabBar-container,
.header-container{
position: fixed;
left: 0;
z-index: 1000;
width: 100%;
}
.tabBar-container{
bottom: 0;
}

/*css reset*/

/*清除内外边距*/
body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
ul, ol, li, dl, dt, dd, /*列表元素*/
form, fieldset, legend, input, button, select, textarea, /*表单元素*/
th, td, /*表格元素*/
pre {
padding: 0;
margin: 0;

}

/*重置默认样式*/
body, button, input, select, textarea {
/*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
font: 14px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
em, i {
font-style: normal;
}

a {
text-decoration: none;
font-size: 14px;
}
li {
list-style-type: none;
vertical-align: top;
}
img {
border: none;
width: 100%;
vertical-align: top;/*解决内联块对齐问题*/
}
textarea {
overflow: auto;
resize: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
input{
border: none;
outline: none;
background: none;
}
/*常用公共样式*/
.fl {
float: left;
display: inline;
}
.fr {
float: right;
display: inline;
}
.cf:before,
.cf:after {
content: " ";
display: table;

}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}

*{
box-sizing: border-box;
}
body{
color: #5d655b;
}
a{
color: #686868;
}

/**
* @Description: 通用适配移动端
* @author Shanshan Li 2020/6/12
*/
(function () {
var docEl = document.documentElement,
viewPortEl = document.querySelector('meta[name="viewport"]'),
dpr = window.devicePixelRatio || 1,
maxWidth = 540,
minWidth = 320;
dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);
docEl.setAttribute('data-dpr', dpr);
docEl.setAttribute('data-minWidth', minWidth);
docEl.setAttribute('data-maxWidth', maxWidth);
var scale = 1 / dpr,
content = 'width=device-width,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-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 ratio = 18.75
var viewPortWidth = docEl.getBoundingClientRect().width || window.innerWidth;
if (maxWidth && (viewPortWidth / dpr > maxWidth)) {
viewPortWidth = maxWidth * dpr;
} else if (minWidth && (viewPortWidth / dpr < minWidth)) {
viewPortWidth = minWidth * dpr;
}
docEl.style.fontSize = viewPortWidth / ratio + 'px';
console.log( docEl.style.fontSize)
console.log( window.innerWidth)
console.log( dpr)
console.log( viewPortWidth / dpr > maxWidth)
console.log( viewPortWidth / dpr < minWidth)
}
})()