最近写了第三个移动端 H5 的项目，准备记录下自己在 H5 项目中的一些实践探索。移动端 H5 与 PC 端开发最大的区别之一，大概就是响应式布局问题。 那么下面我们就来聊聊移动端响应式布局，了解他的来龙去脉，对现有的最佳解决方案探索吧。 H5 这个命名本身是一个很不讨巧的命名…

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 p…

优点：无需插件,能够适应各种窗口大小，只需在CSS中添加@media screen属性。 缺点：相对于代码要重复很多 ； 可能存在闪屏的问题出现。 rem是指相对于根元素的字体大小的单位,就是先给予html元素一个font-size，然后我们所有的rem就根据这个font-si…

A useful tools or tips list for mobile web application developing. 这个项目收集移动端开发所需要的一些资源与小技巧。

很详细得讲解了移动端 HTML5 遇到的适配问题，原因和解决办法，非常有用的一篇文章。

近段时间，在开发移动端项目的时候，产品提了一个“自定义页面”的需求，刚开始在DevTools上做得顺风顺水，一马平川，直到在提交到测试环境用不同的真机访问页面时，却发现了一个很严重的问题：安卓的高倍屏展示自定义页面组件间距的时候会比iPhone要大很多（组件间距由js代码控制s…

一、HTML方法检测在html中分别引用横屏和竖屏样式二、CSS方法检测css中通过媒体查询方法来判断是横屏还是竖屏三、JS方法检测【1】orientationChange事件苹果公司为移动Safar

最近刚接触前端开发，接手了一个移动端H5项目。着实体会掉了前端的坑之多，和H5移动端的坑之多多。 介绍方案之前，首先还是交代一下项目背景与需求，毕竟一切方案也不能脱离实际需求。 总的来说主流的方案有rem和vh两种。 rem（font size of the root elem…

不知不觉在网易已有三年半，占了一半时间都在与移动端打交道，整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。Android和iOS各显神通，Android的系统版本和屏幕分辨率多得难以一招兼容，iOS的顽固标准…