关于移动端百分比宽度的几种实现

由于移动端的设备宽度各不相同,而且因为竖屏宽度都比较小,所以一般都采用满屏的方式布局,而不像PC端的使用固定宽度居中的技术布局。既然要使用满屏,那么各种百分比技术就显得尤其重要,下面大概聊聊实战过程使用到的一些技术。

为了方便各种技术对比,我们使用不同的技术实现同一个四等分满屏,且每个小分为一个正方形的需求。

整体的html结构为:

// `list--xxx`表示下面具体技术的名字
ul.full-list.list--xxx
    .item*4

为了方便视觉查看,我们将奇偶数的item背景色设置不同:

.full-list .item{
  background: #f5f5f5;
}
.full-list .item:nth-child(2n){
  background: #ccc;
}
.full-list .item:hover{
  background: #f00;
}

demo效果见: 移动端百分比宽度的几种实现

vw

这是一个新的系列单位,总共有四个vw, vh, vmin, vmax,分别表示视窗宽度,视窗高度,视窗宽高中的最小值,视窗宽高中的最大值。目前android 4.3- 不支持,ios支持良好,具体参考caniuse vw

1vw表示百分之一的视窗宽度,同理10vw就是百分之十。从这新单位的出现,也知道为了移动端的百分比我们的W3C组织也是操碎了心。

为了上面所说的四等分,那每个的宽度应该为25vw,而我们ullist--xxx就是list--vw

.list--vw{
  overflow: hidden;
}
.list--vw .item{
  float: left;
  width: 25vw;
  height: 25vw;
}

果然不亏是新的单位,分分钟解决问题,超级简单,就是目前android这边还有点不兼容难办,不过相信未来是光明的。

rem

先说明,这节所说的思想其实是手淘lib-flexible中提出的。原理就是js获取视窗宽度,然后设置html的font-size为视窗宽度的十分之一即百分之十,而rem单位表示相对于根元素html的大小,所以1rem即表示视窗宽度的十分之一。这样通过rem与html的font-size的关系,拐了个弯实现了一个相对于视窗宽度的百分比。

js设置html的font-size

document.addEventListener("DOMContentLoaded", function(event) {
    document.documentElement.style.fontSize = window.innerWidth/10 + "px";
  });

css代码如下:

.list--rem{
  overflow: hidden;
}
.list--rem .item{
  float: left;
  width: 2.5rem;
  height: 2.5rem;
}

注意这里1rem即是百分之十的视窗宽度,而上面说的1vw是百分之一的视窗宽度。

关于lib-flexible还有个data-dpr的概念,感兴趣的可以研究研究,不过个人觉得这个功能除了实现ios的retina屏的1px之外,其余有点鸡肋,完全可以使用media query解决,所以只采用了它的font-size思想。

这里感谢下手淘为我们前端界创造了个这么好的解决方案。

flex & percent

这个应该不必多说了,现在到处都是flex,而%的更是基础了。

直接上代码:

.list--flex{
  display: flex;
}
.list--flex .item{
  flex: 1;
  padding-top: 25%;
  height: 0;
}

.list--percent{
  overflow: hidden;
}
.list--percent .item{
  float: left;
  width: 25%;
  height: 0;
  padding-top: 25%;
}

注意,padding或margin的%单位都是按照父元素的宽度计算的。

当然如果只是实现等分需求的,display:table也是一个不错的选择。代码为:

.parent{
    display: table;
    table-layout: fixed;
    width: 100%;
}
.parent > .child{
    display: table-cell;
}

最后,如果不考虑andriod 4.3- 的话vw是最好的选择;如果考虑兼容的问题,rem的方案是最好的选择。而其余的flex%或是table都不是最简单省事的,在单纯的宽度处理方面还能胜任,但如果涉及到高度随宽度同时变化,即宽高遵守某个比例(如图片或视频的变化),就需要借用padding技术撑开了。所以,如果是单纯的宽度布局就随便用了,而如果要实现某些宽高比,vmrem才是最优的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏AhDung

【C#】在窗体中水平居中的控件,到了XP下不居中的解决办法

A、将窗体FormBorderStyle属性改为Fixed系,当然这会导致用户不能拖拉窗口大小,所以你可能需要B计划↓

872
来自专栏刘春鹏的专栏

移动 web 开发最佳实践

本文从细节和原理入手,一步一步探讨构建移动web界面的最佳实践。对移动端H5高清和多屏适配的一些方案总结,没有固定的套路及方法,请根据自身业务的特点,选择其中的...

9660
来自专栏HTML5学堂

IE6已逝,遗忘在角落的选择器,赶快用起来

那些被遗忘的选择器 在IE6~8“统治”网络世界的时代,CSS2版本曾经推出过几种选择器,而这几种选择器由于对IE6支持程度较差,使得前端开发工程师不得不将其舍...

2759
来自专栏腾讯社交用户体验设计

经验分享:多屏复杂动画CSS技巧三则 - 腾讯ISUX

1522
来自专栏企鹅号快讯

浅谈Web自适应

前言 ? 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率...

1878
来自专栏王大锤

iOS设置tableViewCell之间的间距(去掉UItableview headerview黏性)

2845
来自专栏佳爷的后花媛

零碎之viewport

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta...

1084
来自专栏小文博客

WebP为何那么受欢迎?

WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及...

3719
来自专栏Golang语言社区

【Golang语言社区】H5游戏开发-从零开始开发一款H5小游戏(四) 撞击吧粒子,炫酷技能的实现

本游戏有五种技能粒子,分别是 "护盾","重力场","时间变慢","使敌人变小","增加生命"。Player粒子吃了技能粒子后就能表现各种特殊效果。 碰撞检测 ...

3469
来自专栏超然的博客

弹窗细节

  浏览网页时经常会发现弹框出现后,滚动鼠标时,蒙版下面的页面还是可以滚动的,其实这些滚动都是没必要的,因为弹框的原意就是要聚焦用户的注意力。

793

扫码关注云+社区