Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。参数如下。 Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可…

本文讲解了开发中遇到移动端 click 事件与 touch 事件冲突的问题并提供了两种可行的解决方案。

最近在研究关于布局的设计方案，通过学习理解阿里的fusion.design的设计思想并结合手机淘宝H5版的px布局问题。逐渐有了一些想法，这里进行综合整理，也算是抛砖引玉吧。 rem和vw都是为了解决移动端适配问题。rem方案中最成功的就是淘宝的lib-flexible了，它是…

viewport的大小决定了，css中的设置多少像素能刚好占满屏幕。例如，viewport=320,那么设置div的宽度为320px,则div刚好能占满屏幕 移动设备中1px不等于1个物理像素 现如今，移动设备多已经采用高倍屏，像素分辨率（物理分辨率）要比逻辑分辨率高，下表为i…

最近在开发移动端页面的时候遇到固定顶部导航栏并添加搜索输入框的需求，第一反应就是用 position: fixed; 实现。但是这个属性在移动端总有各种奇怪的问题。早在2011年就有人问过这类似问题，但是都9102年了这个问题还有人提出。于是我决定在今年的新环境中再踩一遍 po…

写在前面 好记性不如烂笔头，研究了一下BFC，发现里面比较细的东西也是很多的！关于BFC，很多人可能都听说过BFC这个东西，大概知道这是个啥东西，相信很多人对此并没有一个非常细致的了解，本文预计篇幅较长，认真，耐着性子看，应该都能够比较深入的理解BFC这个概念的规则、作用以及用…

在 H5 项目中，我们会经常遇到页面中存在单个甚至多个 input/textarea 输入框与底部固定元素的布局情况。在 input/textarea 输入框获取焦点时，会自动触发键盘弹起，而键盘弹出在 ios 与 android 的 webview 中表现并非一致，同时当我们…

设备像素/物理像素：由设备的屏幕决定，其实就是屏幕中控制显示的最小单位。 设备独立像素/设备逻辑像素：是一种可以被程序所控制的虚拟像素，在Web开发中对应CSS像素。 DPR（设备像素比）：设备像素比 = 设备像素 / 设备独立像素，如果设备像素大于设备独立像素（DPR大于1的…

在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。 而移动端则较为复杂，它涉及到三个视口：布局视口（Layout Viewpor…