移动端适配-rem: 认识移动端 做适配方案之前先认识下移动端，熟悉移动端和pc端的区别和特点，才能真正理解做适配的精髓，这里就简单介绍下； 网上找不到主流android设备的数据表，就以iphone为例： 以iphone6为例： 竖屏宽为375，叫做逻辑像素（有的地方叫独立像素）； 竖屏宽的像素750，叫做物理像素，是设备实际的光点个数，要知道屏幕都是由一个一个光点组成的; 像素比（Asset）2x，就是2倍，物理像素/逻辑像素； ppi:像素密度326,实际平方英寸的光点个...

实现原理很简单，就是通过把浏览器默认的下拉框样式清除，自定义select样式，再把默认的下拉按钮替换为张向右对齐的小箭头图标即可，具体代码如下。 select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: solid 1px #000; /*很关键：将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("ht...

到需要可以随时随地停止gif动态图片播放的需求的时候，可以通过下面几种方法实现。 方法一：多img资源控制处理 就是准备2套图片，一个是gif动态图片，还有一个是只有一帧的静止的图片，如jpg图片。然后使用JS来回切换<img>的src值为这两张图片地址，或者通过js实现点击就切换显示两张图片。 这种方法的优点就是兼容性强，所有浏览器都可以实现停止效果。然而这种方法有个局限，就是暂停时候呈现的图片永远是同一张。基本上可以说是停止，而不是暂停。 代码如下： html <div class="inpic"&g...

不使用JavaScript来实现响应式菜单。它完全使用整洁和语义化的HTML5标记，而且菜单可以居左、居中和居右对齐，它也包含一个指示器来显示当前激活的菜单项。菜单可以在hover时展开，触屏手机如果点击的话会变成链接跳转，需要用手拨动才是正常的，关闭的话即点击其它地方。 演示地址：http://webdesignerwall.com/demo/responsive-menu/ HTML代码 <nav class="nav"> <ul> <li class="current"><a hre...