移动终端自适应布局方法的calc（）和vw

当前端人员处理移动终端的自适应布局时calc 移动端兼容性，前端最流行的方法应该是使用媒体查询来设置HTML的字体大小，然后在其中设置Dom的宽度和高度. 雷姆单位. 此方法的优点兼容性很好，但缺点是市场上有太多不同的模型，并且尺寸类型更复杂，因此如果要实现所有尺寸模型都可以适应，则工作量是比较大. 目前，有些人会选择使用百分比进行布局. 这种布局方法仅在处理元素的宽度和高度时非常有用. 但是，当在js中设置dom元素的大小时，会出现百分比限制. dom元素的font-size无法使用页面宽度的百分比设置其大小. 也就是说，当元素的宽度和高度占页面的50％时，一段文本将在不同宽度的手机屏幕上显示不同数量的行. 如下:

这是iPhone4中的显示屏，

这是iPhone6中的显示屏，

因此如何使页面上的所有元素自适应，这是当前需要解决的问题. 这时，C3-VW中使用了新的长度单位. 该单元的描述是: 相对于视口的宽度. 视口被分为100个单位的vw，这意味着在375英寸宽的屏幕上，1vw等于3.75px，在320屏幕上，1vw等于3.2px. 在这种情况下，我们有一个统一的单位来测量不同尺寸的屏幕. 这时calc 移动端兼容性，我们将结合rem，即设置HTML字体大小的字体大小: calc（100vw / 18.75）-这是根据iPhone6的大小设计的图片中的计算，此时为1rem在iPhone6尺寸页面中为20px;通过恢复设计，现在可以将页面元素的大小按比例调整为任何宽度的终端.

这是通过以下设置在iPhone4中显示的效果:

这是通过在iPhone6中设置显示效果来实现的:

我们可以看到两个模型上的显示效果完全相同.

当然，此方法的最大问题仍然是兼容性问题

目前，大众汽车的兼容性还不容乐观，但是对于一些正在做混合APP的同行来说，这个问题基本上是不存在的，并且随着设备的更新和迭代，相信这种方法将是可行的. 将来会用到的会逐渐传播回搜狐，查看更多

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-187149-1.html