移动端布局怎样实现？实现移动端布局的方法有很多，这篇给大家分享是使用vw+rem做移动端布局的方法，下文有很详细的介绍，感兴趣的朋友可以参考，接下来就跟随小编一起来学习一下吧。

    简单介绍下rem布局方案

    rem是css中的长度单位，1rem=根元素html的font-size值。当页面中所有元素都使用rem单位时，你只需要改变根元素font-size值，所有元素就会按比例放大或者缩小。因此我们只需要写一小段js代码，根据屏幕宽度改变html的font-size值，就可以做到弹性布局。这种方法确实便捷，兼容性也很好，是目前非常主流的弹性布局方案。但这种方案有弊端（弊端之一：和根元素font-size值强耦合，系统字体放大或缩小时，会导致布局错乱；弊端之二：html文件头部需插入一段js代码 ），本文将介绍一种更优秀纯粹的方案。

    vw单位实现弹性布局

    我们先来看看这vw vh单位 w3c的官方解释 vw：1% of viewport’s width vh：1% of viewport’s height

    viewport即浏览器可视区域大小 我们可以这样理解 100vw = window.innerwidth, 100vh = window.innerheight 在移动端我们一般都可以认为，100vw就是屏幕宽度。若使用vw布局，就不需要再像rem那样，在js中去动态设置根元素的font-size了，sass中只需要使用这个函数做转换即可

//以iphone7尺寸@2x 750像素宽的视觉稿为例
@function vw($px) {
    @return ($px / 750) * 100vw;
}

//假设一个div元素在视觉稿中，宽度为120px，字体大小为12px
div {
    width: vw(120);
    font-size: vw(12);
}

    vw单位和百分比%单位对比

    那么100vw和我们平时用的width:100%有什么区别呢？

    1.百分比%是根据父元素宽度或者高度进行计算，而vw vh固定按照viewport来计算，不会受父元素宽高度影响。

    2.100vw包括了页面滚动条宽度（页面滚动条属于viewport范围内，100vw当然包括了页面滚动条宽度）。但把body或者html设置为width:100%时，是不包括页面滚动条的宽度的。也就是说100vw在有纵向滚动条的情况下，会比100%宽。 那么就会引发一个问题：pc端使用vw单位时，如果页面内容超出一屏长度，出现了纵向滚动条，同时有元素width:100vw， 则会导致出现条横向滚动条，因为元素（100vw + 滚动条宽度）超出了viewport宽度。（移动端滚动条不占位，所以不会有这个问题）不过pc端一般不需要弹性布局，还是尽量使用width:100%更保险。

• 根据CSS3规范,视口单位主要包括以下4个:
  
• vw : 1vw 等于视口宽度的1%
• vh : 1vh 等于视口高度的1%
• vmin : 选取 vw 和 vh 中最小的那个
• vmax : 选取 vw 和 vh 中最大的那个

    用视口单位度量，视口宽度为100vw，高度为100vh（左侧为竖屏情况，右侧为横屏情况）

    例如，在桌面端浏览器视口尺寸为650px，那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）。

    兼容性

    利用适口单位适配页面

    对于移动端开发来说，最为重要的一点是如何适配页面，实现多终端的兼容，不同的适配方式各有千秋，也各有缺点。

    就主流的响应式布局、弹性布局来说，通过Media Queries 实现的布局需要配置多个响应断点，而且带来的体验也对用户十分的不友好:布局在响应断点范围内的分辨率维持不表，而在响应断点切换的瞬间，布局带来断层式的切换变换，如同卡带的唱机般"咔咔咔"地一又一下。

    而通过采用rem单位的动态计算的弹性布局,则是需要在头部内嵌一段脚本来进行监听分辨率的变化来动态改变根元素字体大小，使得CSS于JS耦合了在一起。

    有没有办法能够解决这样的问题呢？

    答案是肯定,通过利用适口单位实现适配的页面,是既能解决响应式断层问题，又能解决脚本依赖的问题的。

    用法以iPhone6为基准(750)

    第一步一般来说，我都会对移动端进行meta标签设置

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

    因为iPhone6以及大多数的dpr为2,为了第二步的方便进行换算

    第二步设置body、html的font-size

html {
    font-size: 13.3333333333333vw // 100px
}

    13.3333333333333vw怎么来?

• 适口为100vw,以iPhone6 750px基准
• 适口/iPhone6
  • 100vw / 750 = 0.133333333333333vw
• 如果我们以100px作为适口那么
• 100px / 750 = 0.133333333333333px
• 就是1px = 0.133333333333333vw
• 那么整个适口等于 0.133333333333333 * 10013.3333333333333vw = 100px
• 最终于得出 100px = 1rem

    通过这样子换算我们利用vw把rem转换成了以100px为基准

    那么在项目上就很好地可以进行使用了

div {
 
     // width: 100px;
     width: 1rem; 
}
 
span {
   // height: 12px
    height: .12rem
}

    以上就是关于使用vw+rem做移动端布局的介绍，上述示例具有一定的借鉴价值，有需要的朋友可以参考学习，希望对大家学习移动端布局的实现有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 基于JS怎样制作拼图小游戏，具体过程是什么

  ​本篇文章给大家带来的内容是关于使用javascript中canvas实现拼图小游戏 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

• CSS权重如何理解，这个值如何计算的

  我们在使用CSS对网页元素定义样式时经常会遇到这种情况：要对一般元素应用一般样式，然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢？在CSS中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于具有一般选择器的规则，如果两个规则的特殊性相同，那么后定义的规则优先。那么，又怎么来计算选择器的特殊性呢？下面这张图介绍了

• 用HTML5怎样实现长按删除的功能，思路和方法是什么

  本篇文章给大家带来的内容是关于移动端HTML5模拟长按删除事件（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

• CSS3中将footer始终固定在底部的代码是什么

  这篇文章主要介绍了CSS3 实现footer 固定在底部(无论页面多高始终在底部)的相关资料,需要的朋友可以参考下

• 用CSS怎样画圆环，都有哪些实现方式

  这篇文章主要介绍了实现CSS圆环的5种方法(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧