index.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,maximum-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<!-- 引入我们的flexible.js文件 -->
<script src="js/flexible.js"></script>
<title>rem适配方案2</title>
</head>
<body>
<div class="search-content">
<a href="#" class="classify"></a>
<div class="search">
<form action="">
<input type="search" value="这是rem适配方案2">
</form>
</div>
<a href="#" class="login">登录</a>
</div>
</body>
</html>
index.css:
body {
min-width: 320px;
/* 默认是把屏幕划分成十等份,如果不设最大宽度body内文字会在最左侧,设置最大宽度可以达到一个版心居中的效果 */
max-width: 750px;
/* flexible给我们划分了十等份 */
width: 10rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
background-color: #f2f2f2;
}
a {
text-decoration: none;
font-size: .3333rem;
}
/* 这个插件默认的HTML文字大小cssroot 是16px */
/* 如果屏幕超过750px 那么就按照750px设计稿来走 不会让页面超过750px */
@media screen and (min-width: 750px) {
html {
font-size: 75px !important;
}
}
/* search-content */
.search-content {
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 10rem;
height: 1.173333rem;
background-color: #FFC001;
}
.classify {
width: .5867rem;
height: .9333rem;
background-color: pink;
margin: .1467rem .3333rem .1333rem;
background: url(../images/classify.png) no-repeat;
background-size: .5867rem .9333rem;
}
.search {
flex: 1;
}
.search input {
outline: none;
border: 0;
width: 100%;
height: .88rem;
font-size: .3333rem;
background-color: #fff2cc;
margin-top: .1333rem;
border-radius: .44rem;
color: #757575;
padding-left: .7333rem;
}
.login {
width: 1rem;
height: .9333rem;
margin: .1333rem;
color: #fff;
text-align: center;
line-height: .9333rem;
font-size: .3333rem;
}
flexible.js:
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))