移动端自适应方法

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;
}
上一篇下一篇

猜你喜欢

热点阅读