今天遇到一个问题，就是在一个弹出层里面有一个可滚动的列表，当列表弹出层列表滚动的时候，原来的页面也跟着滚动了，体验相当不好。

在PC还好，可以给body一个overflow:hidden完事，在移动端却不管用啊

查了一下，这个叫移动端滚动穿透，一个大神给出了解决方案：点这里，感觉还是太麻烦了

然后自己琢磨了一番，想到了一个简单的处理方法。

既然滚动是因为内容超出了父级容器，那么就好办了，直接让内容不超出就好了。

直接让内容脱离文档流，使用position:fixed，当弹出层弹出的时候直接在body上加绝对定位position:fixed，当弹出层消失的时候，把原来页面的定位去掉。嗯，就这么简单。

看代码

- 阅读剩余部分 -

这几天拿安卓手机做测试的时候，发现安卓的过渡动画好帅，于是，用css实现了一下

看下面

1.Material Design input

- 阅读剩余部分 -

嗯，在适配移动端页面的时候都会用的的标签

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

viewport的几个属性

• width：控制 viewport的大小，你可以给它指定一个值，如：600，或者甚至还可以给它一个特殊的值，如：device-width，device-width为设备的宽度（单位为缩放为100% 时的 CSS 的像素）

• height：与 width 相对应，指定viewport 高度

• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例

• maximum-scale：允许用户缩放到的最大比例

• minimum-scale：允许用户缩放到的最小比例

• user-scalable：是否允许用户手动缩放

viewport指的是窗口视窗，一般有三种：layout viewport（布局视窗），visual viewport（视觉视窗）和ideal viewport（理想视窗）

- 阅读剩余部分 -