通常我们在pc上看到的页面都是比较大的，在pc上访问页面是正常显示的，默认是不会被缩放的，除非是手动进行了缩放，页面才会被放大比例或者是缩小比例显示。但是在移动端是不一样的，如果将一个pc端的页面放到手机端进行访问，那么可能出现页面挤到一起、布局错乱或者出现横向滚动条的情况，我…

前面写过一篇移动端适配实践的文章，很长，内容太多，看得容易凌乱，重新写个通熟易懂版的。 比如，对于一个移动端页面，设计师给的视觉稿画布宽 750，视觉稿中的一个黄色区块的尺寸是 702 x 300，并在画板中居中。我们希望在任何一个设备中的呈现比例都与视觉稿中一样，根据布局视口…

1. 首先我们先介绍当下的长度单位 2. 移动端的布局 可以看到百分比布局能自动适应屏幕宽度。 为了更好的使用rem,这里1rem等于屏幕宽度的10分之1。注意不能做到1rem==屏幕的百分之1。因为浏览器的最小font-size是12px; 可以看到宽度和高度都能按百分比变化…

rem是根元素字体的单位，比如 html{font-size:16px;} ，1rem相当于16px。 不仅仅可以给字体用，其他px单位的都可以用，比如设padding:2rem ，相当于32px。 1 . 内容区块可伸缩：内容区块的在一定程度上能够自动调整，以确保填满整个页面…

可以发现，如此罗列出来后，通过代码实现就变的容易了，这次需求的主要实现，依靠的就是鼠标事件，所以必须要理解鼠标事件的属性，接下来在代码中，我会将这些属性及事件进行使用并解释。 上面的代码，我做了很多的注释，阅读下来发现，只要理解了属性所代表的含义，利用其作用，很容易就可以实现想…

​ 偏移量(offset dimension)是javascript中的一个重要的概念。涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性。当然，还有一个偏移参照——定位父级offsetParent。本文将详…

使用它就可以实现fullpage.js这种全屏滚动效果，其实，这种全屏滚动效果的理论非常简单，就是使用js监听界面滚动，当界面滚动到某个值时就让界面持续滚动到下一个屏幕，但是！要考虑到屏幕尺寸大小带来的兼容性问题就是一件非常麻烦的事情。 它们在浏览器上面存在兼容性问题。 CSS…

BFC的中文名称是块级格式上下文，Block Formatting Context的简称，而具有BFC特性的元素可以看出一个独立的隔绝容器，里面的元素不会影响外面的元素。在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。 1. 父子元素 margin 重…

当浏览器对一个 render tree 进行渲染时，浏览器的渲染引擎就会根据 基础盒模型(CSS basic box model) ，将所有元素划分为一个个矩形的盒子，这些盒子的外观，属性由CSS来决定。 我们在浏览器控制台输入如下代码就可以看到页面的每一个元素都是由一个矩形来…