概述

有一阵子没写博客了，学习了移动开发一段时间，发现从PC网页到Mobile网页还是区别挺大的，PC考虑的事情没Mobile那么多。因为手机端的设备像素实在是乘次不齐，各种各样。今天比较闲一些，就来说一下咱们前端在开发移动网页的时候都需要注意些什么东西。

流行的移动端布局

首先来说说现在比较流行的布局，一共有4种：

百分比布局
flex布局
rem布局
viewport

先来讲讲这四个布局吧

百分比布局

首先来说说百分比布局，在我本人使用的时候，就感觉有个致命的缺点：%是参考父级的

.box {width: 50%;background: #999;color: #fff;.box1 {width: 50%;height: 50%;background: #666;.box2 {width: 50%;height: 50%;background: #333;}}
}

效果：

如图，这三个盒子都是设置成了50%的宽高，相互嵌套，每个盒子都参考上一个盒子的大小来。这会导致一个问题：如果你想用百分比设置某一部分的宽高，那么你 需要保证其父级、父级的父级……即祖先元素都要有百分比。这显然是不明智的。

不过，在某些情况下，百分比还是挺好用的，比如京东移动端就用到了百分比布局。

rem布局

我个人比较喜欢flex布局和rem布局，flex布局应该就不用多说了，在PC端都是很常使用的，今天还是主要说说rem布局。
rem，第一个r的意思是root，用过rem的朋友都知道rem是相对于根元素html而言的，

1rem = 1 × html.style.fontSize

是的，你会发现，如果你想改变1rem的大小，你可以修改根元素的字体大小即可。

rem布局的优点也就体现在这里了，rem的参考只有一个，它不像%那样参考父级，rem直接参考根元素。另外，它的比例能够按需修改，比如苏宁移动端，它就是用了rem布局来实现的。

可是，将font-size设置死也不是解决办法呀，这里我们用到了flexible，flexiblejs是淘宝做出的用于解决移动端适配问题的js框架。

flexiblejs可以到github上查看：github_flexible.js_淘宝

原理也很简单

就是获取你的设备的像素，然后等分成若干份，让1rem=1份就行了。
比如说你的设备是750px的，分成10份，就是每份75px，那么我们将 html { font-size: 75px } 这样就实现了1rem = 75px，也就是说 10rem 就能占满你的屏幕了。

我这里也实现了一个简易版的flexiblejs，我叫它为resizeablejs

function resize() {let rem = document.documentElement.clientWidth / 25;document.querySelector('html').style.fontSize = rem + 'px'
}
window.onload = function () {resize()
}
window.onresize = function () {resize()
}

这样，在你改变视图的时候，1rem的值也会跟着改变，从而改变对应的大小，这能让你的页面跟设计图保持高度一致。

viewport

viewport这里也不说了，1vw≠1vh，不是特别好用，但是vw vh的优点就是基于viewport！想必将来改进后肯定很受欢迎！

end 骚话

好的，今天的分享就到这里，草草了事的结尾了哈哈哈，大家共勉哈~

下班不积极，脑子有问题！

web前端移动开发必须知道那些基础相关推荐

Web前端设计开发规范
前言本文主要整理了Web前端设计开发的相关规范,主要由网络收集,希望对大家在Web设计和开发的过程中有一些帮组. 目录一.界面设计规范细则二.CSS编写和命名规范三.JavaScript编程规 ...
web前端模块化开发_真正的模块化Web应用程序：为什么没有开发标准？
web前端模块化开发 OSGI , SpringSource , Jboss模块 ,J2EE和清单永远不会结束.所有这些技术都向他们的最终用户/开发人员保证了相同的东西,或多或少是Java模块化Web ...
Web前端工程师开发规范必须要注意的事
Web前端工程师开发规范必须要注意的事规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范 ...
【干货分享】自己总结录制的web前端精讲视频，零基础入门学习资料，开发工具
"大清亡于闭关锁国,学习技术需要交流和资料" 为了让大家在自己的前端生涯中少走一些弯路,我亲自做了这么一门课:用我自己一路从码农到创业者的亲身经历,带大家感受前端程序员的职业发展规 ...
新手入门Web前端要掌握的4项基础技能
Web前端开发是近些年非常受欢迎的职业,几乎每个互联网企业都会招聘Web前端工程师.但目前我国高校并没有开设Web前端专业,想要成为Web前端工程师系统学习就成为很多人选择的方式.那么,Web前端要掌 ...
php前端介绍,Web前端的开发前景介绍
"路漫漫其修远兮,吾将上下而求索",这句出自<离骚>. 虽然端午已过,但是还是不影响一个程序员想表(zhuang)达(boy)自己此刻心情的冲动. 偶然路过同事旁边,不 ...
web前端网页开发离不开的三要素：HTML、CSS、JavaScript
前端开发是目前高薪岗位之一,是从最开始的页面开发不断发展优化而产生的一个特定的岗位.现在web前端开发一定会用到的三门技术:HTML.CSS.JavaScript.无论是多么炫酷的页面都是这三门技术的 ...
web前端框架开发实例，html5元素大全
对于很多没有学历优势的人来说,面试大厂是非常困难的,大多数的人毕业只找到一个名不经传的小公司过着三点一线的生活,我也是一样,直到生活上的变故,才让我有了新的想法和目标,因此我这个二本渣渣也奋斗了起来, ...
web前端框架开发的几种常用语言？
做Web开发,Web框架一定要熟悉,框架是Web架构开发中必不可少的工具,不仅可以提高开发效率,还能让开发项目更成熟,并且可以提升代码的可再用性,Web框架开发离不开相应的开发语言,以下是常用的Web ...

web前端移动开发必须知道那些基础

web前端必须知道的那些基础——移动开发适配

概述