web前端|html教程
关于移动端百分比宽度的几种实现
web前端-html教程
由于移动端的设备宽度各不相同，而且因为竖屏宽度都比较小，所以一般都采用满屏的方式布局，而不像PC端的使用固定宽度居中的技术布局。既然要使用满屏，那么各种百分比技术就显得尤其重要，下面大概聊聊实战过程使用到的一些技术。
交警管理平台源码,使用vscode如何选择语言,ubuntu基础镜像,tomcat8启动,爬虫工具安装,如何给php代码加密,黄石服装seo推广哪家好,视频网站用啥源码好,asp简历 word模板 源码lzw
为了方便各种技术对比，我们使用不同的技术实现同一个四等分满屏，且每个小分为一个正方形的需求。
热血江湖源码 易,vscode git 更新,ubuntu其他位置中删除文件,tomcat怎么搭建,sqlite打包教程,joomla 投票插件,公司流行的前端框架,数据爬虫有啥作用,php 输出 xml,喀什seo托管,网站选项按钮,网页制作软件排行榜,主页面设计模板,淘宝客整站程序lzw
整体的html结构为：
o2o生活源码之家,vscode 打开git库,ubuntu 重启ntpd,tomcat 首页 关闭,SQLite截取关键字,西安冷血爬虫萌宠馆在吗,php 实时数据,南昌整站seo服务,汽车网站程序下载,网页漂浮广告制作,单页模板扒手lzw
// `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，而我们 ul的 list–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技术撑开了。所以，如果是单纯的宽度布局就随便用了，而如果要实现某些宽高比， vm和 rem才是最优的。
