移动端配置大全

index.html中视口 放大 缩小无效 

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

320的写法     （以下所有的写法都推荐创建一个js文件夹引入到全局main.js中）

function gethtmlfontsize() {
  // 三个步骤:
  // 1.获取html的宽,
  let htmlwidth = document.documentElement.clientWidth || document.body.clientWidth; //有些浏览器documentElement获取不到,那就使用后面的body
  console.log(htmlwidth);

  // 2.htmlDom
  let htmlDom = document.getElementsByTagName("html")[0]
  console.log(htmlDom);

  //3.设置根元素样式
  htmlDom.style.fontSize = htmlwidth / 20 + 'px';
}
// 调用一次
gethtmlfontsize();
// 添加监听事件(resize是监听的意思)
window.addEventListener('resize', gethtmlfontsize)


750的写法

(function (doc, win) {
  var docEl = win.document.documentElement;
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

  var refreshRem = function () {
    var clientWidth = win.innerWidth ||
      doc.documentElement.clientWidth ||
      doc.body.clientWidth;

    console.log(clientWidth)
    if (!clientWidth) return;
    var fz;
    var width = clientWidth;
    fz = 16 * width / 375;
    docEl.style.fontSize = fz + 'px'; //这样每一份也是16px,即1rem=16px
  };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, refreshRem, false);
  doc.addEventListener('DOMContentLoaded', refreshRem, false);
  refreshRem();

})(document, window);


750的第二种写法
定义一个js文件夹 写入以下内容 然后引入main.js全局中

function change() {
  document.documentElement.style.fontSize = ( document.documentElement.clientWidth ||  document.body.clientWidth) * 100 / 750 + 'px'
}

调用一下
change()

// 窗口大小监听改变
window.onresize = function() {
  change()
}

解决移动端 2倍屏 3倍屏的1px边框问题
安装：cnpm i border.css --save

引入到main,js中



解决各大浏览器的默认样式问题
安装：cnpm i reset.css --save

引入到main,js中


解决移动端点击事件300毫秒问题
安装：cnpm install fastclick  --save

引入main.js中
import fastClick from 'fastclick'
fastClick.attach(document.body)

改变输入框中的placeholder的默认颜色 

  ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: #e4e7ea;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #e4e7ea;
  opacity: 1;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #e4e7ea;
  opacity: 1;
  }
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #e4e7ea;
  }

在应用商店下载插件 px to rem & rpx (cssrem)
在拓展设置里面修改 font-size基准单位为50

输入框placehoder文字居中

input::-ms-input-placeholder{
        text-align: center;
}
input::-webkit-input-placeholder{
        text-align: center;
}