html5适配遇到的问题

html5页面的适配方案

1.采用百分比和媒体查询来进行适配
2.使用固定高度和一定的媒体查询（以拉勾网为例）
3.采用rem布局方式

使用媒介查询来适配移动端

@media screen and (min-width: 320px) {
	html {
		font-size: 50px;
	}
}
@media screen and (min-width: 360px) {
	html {
		font-size: 56px;
	}
}
@media screen and (min-width: 400px) {
	html {
		font-size: 63px;
	}
}
@media screen and (min-width: 440px) {
	html {
		font-size: 69px;
	}
}
@media screen and (min-width: 480px) {
	html {
		font-size: 75px;
	}
}
html {
	font-size: 15.625vw;
}
@media screen and (min-width: 640px) {
	html {
		font-size: 100px;
	}
}

rem布局时注意的问题

1.在index.html里面设置头部

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

2.动态设定根元素的font-size大小。

动态设定根元素font-size大小有两种方式，一种是通过js来进行计算，动态将px单位
转为rem单位。另一种是使用px转rem的插件。

①通过js动态计算根元素大小的方式

(function (doc, win) {
  var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  recalc = function () {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    if(clientWidth>=640){
      docEl.style.fontSize = '100px';
    }else{
      docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
    }
  };
  if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

②通过插件来自动将px转为rem。（基于vue-cli3的vue项目移动端样式适配，lib-flexible和postcss-px2rem）
链接地址 px转rem插件

注：实际在使用插件的时候遇到的问题：
1）、在使用了flexible和ostcss-px2rem插件之后，需要在``main.js``中手动来设定
一下根元素的字体大小。

window.onresize = setHtmlFontSize;
function setHtmlFontSize(){
  const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
  const htmlDom = document.getElementsByTagName('html')[0];
  htmlDom.style.fontSize = htmlWidth /7.5 + 'px';
}
setHtmlFontSize();

2）、flexible``并不会``为页面根据屏幕自动添加<meta name='viewport' >标签，动
态控制initial-scale，maximum-scale，minimum-scale等属性的值。``需要手动添加，
如果不添加，会导致一部分问题的出现``.

问题表现:通过clientWidth获取的设备宽度都将是980.为什么会导致这个问题？

3.探究<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">的实际作用。

参照文章：viewport详细解释

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。

综上，在进行rem布局时，一定要使用<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">将移动端的viewport设置为设备的宽度。