用rem编写移动端自适应网页
2019-03-29 本文已影响280人
不染事非
1.计算公式: 元素的宽度(或高度) / html元素(跟标签)的font-size = rem;
2.举例 元素的宽度是 200px, html的font-size是100px, 那么元素宽度的rem大小 = 200/100 = 2rem
移动端自适应网页的编写
1.自适应: 当屏幕的像素变大的时候,字体和元素也响应变大
2.什么是视口: 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域
3.代码如下(简单一点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 视口宽度与设备宽度一样 禁止用户缩放 -->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Document</title>
<style>
// 当我们拖动网页或者刚改手机的时候,html的font-size会发生改变
html {
font-size: 100px;
}
body {
font-size: 16px;
}
h1 {
font-size: 0.12rem;
}
// 试试手机为ip6plus和ip5时,div的宽高各是多少(px)
div {
width: 1rem;
height: 1rem;
background: gray;
line-height: 1rem;
}
</style>
</head>
<body>
<script>
//获取手机屏幕宽度
function resetWidth() {
// 兼容ie浏览器 document.body.clientWidth
var baseWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(baseWidth);
// 默认的设置是375px(ip6)的根元素设为100px, 其他的手机都相对这个进行调整
document.documentElement.style.fontSize = baseWidth / 375 * 100 + 'px'
}
resetWidth();
window.addEventListener('resize', function () {
resetWidth();
})
</script>
<div>
内容
</div>
</body>
</html>
移动端屏幕适配
淘宝做法：
(function(doc){
var baseSize=40;
var baseWidth=640;
var maxWidth=480;
var lastWidth;
var timeoutAdjust;
var html=doc.getElementsByTagName("html")[0];
var adjust=function(){
var width=Math.min(html.offsetWidth,maxWidth);
if(lastWidth!=width){
html.style.fontSize=(baseSize/baseWidth*(lastWidth=width))+"px";
}
};
addEventListener("resize",function(){
adjust();
clearTimeout(timeoutAdjust);
timeoutAdjust=setTimeout(adjust,50);
},false);
adjust();
}(document));
普通做法：
/* 设计稿是750,采用1：100的比例,font-size为100 * (docEl.clientWidth * dpr / 750) */
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
rem = 100 * (docEl.clientWidth * dpr / 750);
scale = 1 / dpr;
// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 设置data-dpr属性，留作的css hack之用，解决图片模糊问题和1px细线问题
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
移动端显示1px的问题
由于高清屏的特性，1px是由2×2个像素点来渲染，那么我们样式上的border:1px在Retina屏下会渲染成2px的边框，与设计稿有出入，为了追求1px精准还原，我们就不得不拿出一个完美的解决方案
-
用小数来写px值
IOS8下已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #999 }
}
- 缩放解决
/* 设计稿是750,采用1：100的比例,font-size为100*(100vw/750) */
.border-1px {
position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border-1px:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
border-top: 1px solid #D9D9D9;
color: #D9D9D9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
postcss-pxtorem 像素自动转换成rem
1.安装postcss-pxtorem
npm i postcss-pxtorem --save-dev
2.打开项目根目录下的package.json，在postcss的plugins里添加下面的代码
"postcss-pxtorem": {
"rootValue": 100,
"propList": [
"*"
]
}
7177443-8aba0ea6137d5022.png
