移动端自适应方法
2018-05-19 本文已影响0人
cCedar
动态设置像素比
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
//获取像素比
var pixelRatio = 1 / window.devicePixelRatio;
//通过js动态设置视口(viewport)
document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixelRatio+',minimum-scale='+pixelRatio+',maximum-scale='+pixelRatio+'" />');
动态设置字体大小
// 获取html节点
var html = document.getElementsByTagName('html')[0];
// 获取屏幕宽度
var pageWidth = html.getBoundingClientRect().width;
// 屏幕宽度 / 固定数值 = 基准值
html.style.fontSize = pageWidth / 10 + "px";
//实际宽度
width=(测量宽度/rem)*rem
使用less
a {
-webkit-tap-highlight-color: transparent;
text-decoration: none;
color: #818788;
}
input {
-webkit-appearance: none;
}