一、引入flexible.js文件
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 / 24;
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);
二、vscode中安装cssrem插件(px转rem的插件)
修改cssrem默认的html文字大小(默认是16px)
PC端适配方案
-
设计稿是1920px
- flexible.js 把屏幕分为 24 等份
function setRemUnit() { var rem = docEl.clientWidth / 24; docEl.style.fontSize = rem + "px"; }
-
cssrem 插件的基准值是 80px
将cssroot改成80px
但是别忘记重启vscode软件保证生效
移动端适配方案
- 设计稿是750
- flexible.js 把屏幕分为 10 等份
function setRemUnit() {
var rem = docEl.clientWidth / 10;
docEl.style.fontSize = rem + "px";
}
- cssrem 插件的基准值是 75px
将cssroot改成75px
但是别忘记重启vscode软件保证生效
移动端案例(750像素稿)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<!-- 引入我们的flexible.js 文件 -->
<script src="js/flexible.js"></script>
<title>Document</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
/* 如果我们的屏幕超过了 750px 那么我们就按照 750设计稿来走 不会让我们页面超过750px */
@media screen and (min-width: 750px) {
html {
font-size: 75px!important;
}
}
body {
min-width: 320px;
max-width: 750px;
/* flexible 给我们划分了 10 等份 */
width: 10rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
background: #f2f2f2;
}
a {
text-decoration: none;
font-size: .333333rem;
}
/* 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: .586667rem;
height: .933333rem;
margin: .146667rem .333333rem .133333rem;
background: url(../images/classify.png) no-repeat;
background-size: .586667rem .933333rem;
}
.search {
flex: 1;
}
.search input {
outline: none;
border: 0;
width: 100%;
height: .88rem;
font-size: .333333rem;
background-color: #FFF2CC;
margin-top: .133333rem;
border-radius: .44rem;
color: #757575;
padding-left: .733333rem;
}
.login {
width: 1rem;
height: .933333rem;
margin: .133333rem;
color: #fff;
text-align: center;
line-height: .933333rem;
font-size: .333333rem;
}
效果如下: