如何利用vw+rem进行移动端布局

编辑: admin 分类: css 发布时间: 2022-01-18 来源:互联网

你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹

简单介绍下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那样，在j【文章原创作者：http://www.1234xp.com/shsgf.html转载请保留出处】s中去动态设置根元素的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进行移动端布局的文章就介绍到这了,更多相关vw+rem移动端布局内容请搜索海外IDC网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持海外IDC网！ 

更多阅读