一、移动端自适应插件
移动端自适应插件是一种通过js文件进行页面缩放的方法，常见的有Flexible和rem.js两种插件。
其中，Flexible是将页面分为10份，其中1份为1/10屏幕宽度，通过设置字体大小来控制比例，同时还需要设置 标签viewport的内容为“width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”以适配不同分辨率的手机。
rem.js则是通过设置一个基准像素值，将设备宽度分为同样的比例划分，以rem为单位进行页面布局和调整。
//Flexible插件示例
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function(e) {
if (e.persisted) {
setRemUnit()
}
})
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document));
二、移动端自适应方案
移动端自适应的方案有很多，常见的有基于rem的布局、基于百分比的布局、flex布局等。
其中，基于rem的布局适用于需要更精细的自适应的场景，如有多种机型需要适配；基于百分比的布局则是比较简单直接，一般适用于单一机型的情况。
flex布局则相对较新，需要浏览器支持，并且需要处理兼容性问题，但是对于水平和垂直居中、分散对齐等场景可以实现较为灵活和方便的布局。
//flex布局示例
.parent {
display: flex;
justify-content: center;
align-items: center;
}
三、移动端自适应怎么做
移动端自适应的实现需要从以下几个方面入手：
1、meta标签设置：需要设置viewport适配不同分辨率的手机。
2、字体大小设置：通过JS进行计算并设置字体大小，以保证不同宽度的设备显示效果的一致性。
3、布局适配：使用rem、百分比或者flex等布局方式进行适配，并通过媒体查询判断不同宽度设备的适配方案。
4、高度自适应：通过设置高度为100vh，并通过JS进行动态获取可视窗口高度来实现高度的自适应。
//高度自适应示例
function setHeight() {
var screenHeight = document.documentElement.clientHeight;
document.querySelector(".container").style.height = screenHeight + "px";
}
setHeight()
window.addEventListener('resize', setHeight);
四、移动端自适应方式
移动端自适应方式包括横向自适应和纵向自适应两种方式。
横向自适应包括rem、百分比、vw等方式，其中rem需要JS计算，百分比和vw则可以直接设置。
纵向自适应则可以通过高度自适应来进行，或者通过弹性布局实现高度动态调整。
五、移动端自适应布局如何实现
移动端自适应布局的实现需要遵循以下步骤：
1、设置meta标签viewport。
2、动态计算字体大小，设置rem字号或者直接设置百分比字号。
3、设计布局方案，包括元素大小、间距、相对位置等。
4、通过写好的CSS样式表和JS脚本实现页面自适应。
六、移动端自适应分辨率
移动端自适应需要适配不同的分辨率和机型，在通用尺寸的基础上，可以根据具体的需求进行适当的调整，以符合不同的设备规格。
目前市面上主流的移动设备分辨率都比较统一，一般以iPhone6的375px为标准，但也有其他尺寸的设备，如ipad、小米、三星等，需要根据实际情况进行适配。
七、移动端html自适应布局
移动端html自适应布局一般使用rem或百分比进行适配，其中rem需要JS计算对应的字体大小，而百分比可以直接根据设备宽度进行计算。
在设计页面元素时，需要保证元素宽度和高度的单位都是rem或者百分比，以避免元素位置和大小出现偏差。
八、移动端字体大小自适应
移动端字体大小自适应一般使用rem或百分比进行适配，在页面加载时动态计算对应的基准值，然后通过CSS设置不同元素的字体大小。
需要注意的是，不同设备的字体大小习惯也不同，需要针对不同地区和目标用户选择合适的字体大小。
九、移动端高度自适应方法
移动端高度自适应方法一般使用百分比或vh进行适配，并通过JS对高度进行动态调整。
需要注意的是，如果有包含在页面中的iframe元素，需要对内部页面的高度进行动态监听，并根据内部页面高度的变化来调整外围元素高度，以避免高度出现异常。
十、前端自适应布局选取
前端自适应布局选取需要根据实际情况选择，并结合不同的适配方案进行实现。
在选取布局方案时需要考虑到灵活性、兼容性、可维护性等因素，并根据实际情况进行调整和优化。
