手机端页快速宽度自适应脚本

REM是什么

在我看来，雷是1rem单位等于像素值的HTML节点字体，改变字体大小的HTML节点是最关键的一步。适应可以根据手机宽度的相对大小来实现的，并没有媒体来质疑那些。

我们的设计往往有一个宽度为640或其他尺寸，但我建议使用这个尺寸，640的基础上，实现自适应从小到大，和下面的比1rem = 40px（640宽）。

你为什么这么做
这样的一组代码将有助于使手机大小自适应，不需要媒体查询。使用SASS少可以节省我们更多的时间和更好的体验。

延伸

因为是计算物的价值，所以我们看到在设计前当大小的计算会去这件事，需要花一些时间，所以我提出萨斯（不知道自己去百度）少（不知道自己去百度）相关的变量编码，

SASS相对变量地址：Sass相关变量

较少相对变量地址：更少的相对变量

打开网页，相对可变1-400在上面，只需要选择复制，然后把你的项目，是直接使用，当然，雪碧地图生成工具CSS我写将里面的变量使用，你不妨试试。

移动自适应编码
下面的代码拷贝到淘宝手机的应用程序，当然，我恢复了一些变量，一些注释。

Viewport标签

复制代码代码如下所示：
JS代码
函数（Win）{
函数调整大小（）{
无功domwidth = domele.getboundingclientrect（Width）；
如果（domwidth / V > 540）{
domwidth = 540 * V；
}
win.rem = domwidth / 16；
domele.style.fontsize = win.rem +PX；
}
VaR V，initial_scale，时间码，DOM = win.document，domele = dom.documentelement，视口= dom.queryselector（视图'meta {名称=），灵活（dom.queryselector =柔性'meta {名称=）；
如果（视口）{
视口：
var o = viewport.getattribute（内容）。比赛（ /初始规模=（{ 6 }）（{ D 。} +） 1 /）；
如果（o）{
initial_scale = parseFloat（O { 2 }）；
V = parseInt（1 / initial_scale）；
}
{人}
如果（灵活）{
var o = flexible.getattribute（内容）。比赛（ /初始 - DPR =（{ 6 }）（{ D 。} +） 1 /）；
如果（o）{
V = parseFloat（O { 2 }）；
initial_scale = parseFloat（（1 / V），ToFixed（2））
}
}
}
如果（！v！initial_scale）{
var n =（win.navigator.appversion.match（ / Android / GI），win.navigator.appversion.match（ / iPhone / GI））；
V = win.devicepixelratio；
V N V：V = > = 33 > = 22：1：1，initial_scale = 1 / V
}
没有视口/标签的情况
如果（domele.setattribute（数据DPR
如果（视口= dom.createelement（元），viewport.setattribute（名
domele.firstelementchild.appendchild（视图）
{人}
var m = dom.createelement（div）；
m.appendchild（视图），dom.write（m.innerhtml）
}
}
win.dpr = V；
Win.addEventListener（调整
ClearTimeout（时间码），时间码= setTimeout（大小，300）
}，假）；
Win.addEventListener（pageshow
b.persisted（清除定时器（时间码），时间码= setTimeout（大小，300））
}，假）；
*个人觉得没有必要完成后，身体字体设置为12。
完整的= dom.readystate dom.body.style.fontsize = 12 * VPX：dom.addeventlistener（domcontentloaded ），功能（{
/ / dom.body.style.fontsize = 12 * VPX
}，假）；
* /
调整大小（）；
}（窗口）；
执行代码后，您的页面将适应电话的宽度。它不需要任何媒体查询。它非常简单而且非常有用。它被称为站在巨人的肩膀上。

以上是本文的全部内容，希望大家能喜欢。