移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。

CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。

在移动互联网快速发展的今天，手机的种类和尺寸越来越多，作为前端的小伙伴们可能会越来越头疼。对于移动端适配，不同的公司、不同的团队有不同的解决方案。我们项目中也用了一部分解决方案，网上也看到了一些解决方案，对比下，总结一些自己的理解，希望对各位有帮…

经典的上-中-下布局。 在上-中-下布局的基础上，加了左侧定宽 sidebar。 左边是定宽 sidebar，右边是上-中-下布局。 还是上-中-下布局，区别是 header 固定在顶部，不会随着页面滚动。 左侧 sidebar 固定在左侧且与视窗同高，当内容超出视窗高度时，在…

学习前端方向也有一段时间了，起初做过一些项目，总是发现做完之后自己的边框会变得比较粗，后面翻阅了部分资料慢慢的才了解了这个问题，大致列举了几种解决的办法。
在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。然而1px在不同的…

在搭建公司的样式库时自己的一点整理，中间遇到了很多疑惑，也解决了很多疑惑。目前样式库和文档还在继续开发编写中，希望该文章对存在疑惑的朋友有帮助，也希望有经验的大牛们能提供更多思路上的帮助。 每个公司都有自己的设计风格,以及不一样的产品需求,如果引入其他第三方组件，很大可能带来风…

定心丸：移动前端开发正逐渐步入前端技术的主流，事实上跟在一般的pc上，并不需要你掌握额外的技术，然而你在pc web上那一套在多数情况下并不适用于手机web，你必须知道这其中的注意点。当然移动web给人的感觉是一个拼h5和css3的阵地，这里面有足够高大上的技术等着你去驾驭，在…

需求 最近丁香医生的产品大佬又双叒叕搞事情，想要在 H5 中做一个医生邀请提问的功能，可以将医生的二维码名片分享出去，支持移动、PC 和微信。之前的图片是由后端生成的，并且会缓存三天，导致信息更新不及时。由前端来做就能避免这些问题。 2. 方案 html2canvas.j…

随着前端开发的兴起，QQ也逐渐演变为Web与原生终端混合的开发模式。得到Web动态运营能力的同时，QQ也在交互响应速度、后台服务压力、海量用户集的带宽冲击等方面，受到了更多的挑战。在快速的Web运营节奏下，必须保证嵌入QQ的第三方业务也始终处于一个高质量的服务状态。针对这些问题…

号外号外：专注于移动端的fullPage.js来啦！！！快点我查看做过移动端的同学都知道移动端布局太难了，终端太多了，传统的布局方式已经力不从心，各种新的布局方式被发明在flex之前，传统布局有流式布局（就是默认的方式），绝对定位布局，弹性布局（em），…

Q: 如果在移动端(APP)中发现一个页面有问题, 我们该如何定位问题呢?
A: Fiddler(抓包) + weinre(调试 CSS 样式) + vConsole(调试 JS 逻辑)

来自腾讯 ISUX 社交用户体验设计中心 设计师 对于 iPhone X 适配 H5 页面的解决方案。
目前的 H5 页面可以分为通栏页面和非通栏页面两种，每种页面都可能有底部操作栏，具体如下： 顶部通栏 某些业务的一级页面多数使用了顶部通栏 banner 的效果，由于 iPh…

BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件（GitHub地址），适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。 为了满足这些场景，它不仅支持惯性滚动、边界回弹、滚动条淡入淡出等效果的灵活配置，让滚动更加流畅，同时还提供了很多 API…

什么是响应式？同一个页面在不同屏幕尺寸下有不同的布局。 传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就好了，缺点是CSS比较重。 栅格系统用于处理页面多终端适配的问题。栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力…

Rem布局的原理解析

从交互层面上来讲，完成一个功能（获得想要的信息）的过程称之为用户路径。用户路径越长，完成功能的复杂度就越高，用户体验也就越差。因此当打开一个需要用户填写信息的表单界面时，为了提高可用性，PC 端一般会将光标聚焦到对应输入框（input），移动端也是同理，让对应的 input 获…

打造丝般顺滑的 H5 翻页库

经常会遇到一些需求是页面铺满整个屏幕，即：屏幕有多高页面就有多高不能出现滚动条。

Grid 布局是网站设计的基础，CSS Grid 是创建网格布局最强大和最简单的工具。在本文中，我将尽可能快速地介绍CSS网格的基本知识。我会把你不应该关心的一切都忽略掉了，只是为了让你了解最基础的知识。

默认全屏 在 viewport 的 meta 属性中，添加 viewport-fit=cover 即可。 viewport-fit 默认值为 auto/contain，全屏值为cover，是不是感觉很熟悉？嗯，和 background-size 以及 object-fit…

近几年来，在移动端上因原生开发成本高和效率低而导致涌现出来的一大批优秀前端框架，以及专门针对移动端设备的前端开发框架（如 RN/Weex），大前端的概念被不断地提及。在这样的背景之下，前端技术也将逐渐成为移动端开发者的必备技能。笔者作为一名移动端开发者，在接触了前端开发之后，发…

很多webview提供了调整页面字体大小的功能，例如手机QQ、微信、部分Android内置浏览器等。大部分浏览器调整字体只会导致字体显示大小发生改变，其他元素的大小不受影响。但对于结构稍微复杂一点的页面，字体大小的变动就足以导致页面布局乱掉，导致文本不居中、文字折行、布局混乱等…

最近接到一个需求，中途需要动态设置滚动条的scrolltop值，发现在PC上都没问题，然而上测试环境，各种问题，页面老是不按照设想的那样，最终发现是移动端对滚动条的处理不一致导致。
DEMO： 监听滚动条事件 PC上： 手机上： 看到了吗，就是折磨啃爹，所以移动端需要设置滚动条…

即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加…

CSS在刚开始学习的时候看起来非常简单。但是，随着你的不断了解。很快，你会发现 CSS 没你想象的那么简单，它复杂且有深度。那么本期就随小编一起来看下有趣的CSS～

BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件GitHub地址，有下列功能支持滚动列表，下拉刷新，上拉刷新，轮播图，slider等功能。 为了满足这些功能，better-scroll通过使用惯性滚动、边界回弹、滚动条淡入淡出来确保滚动的流畅。同时还支持…

在最新发布 iPhone X 的全面屏上，Safari 可以精美地显示现有的网站。内容自动嵌入到显示屏的安全区域内，以免被圆角、原深感摄像头系统的空间遮挡住。 凹槽部分填充了页面的 background-color (比如指定为 或 元素的背景颜色)…

最近一个项目掉进了移动端的大坑，包括ios下fixed布局，h5唤起键盘等问题，作为一个B端程序员，弱项就是浏览器的兼容性和移动端的适配(毕竟我们可以要求使用chrome)，还好这次让我学习了一下相关知识。让我们一起来看一下我怎么挣扎出这个大坑的。 先看一下要做什么，也就是一个…

和一步聊聊布局神器flexbox。
本文涉及内容如下： flexbox的基本概念、容器属性学习、项目属性学习、实战演练。 flexbox 堪称布局神器，但属性实在太多让人无从下手，因此将自己所学的知识做个总结。
flexbox是Flexible Box的缩写，译为弹性布局。fl…

移动端开发的兼容问题（自我总结篇）

本站不支持 CodePen 的脚本插入，可以到我的博客阅读直接显示示例代码的版本。 有很多谈及 Flexbox 的文章，但依然有不少前端对此感到困惑。一方面，flex 相关的 CSS 属性繁多，影响到的具体效果也包含多个方面；另一方面，CSS 可以使用 Shorthand pr…

让新手能快速掌握的移动端自适应布局

新的iphonex因为没有实体home按键,多了一个虚拟home按键导致大量的适配问题。 现在iphonex的web端适配基本不用考虑头部的问题，主要需要关注的fixed底部定位的问题。 获取设备信息和浏览器信息。判断iphonex的方法，因为他奇葩的分辨率1125*2436 …