H5移动端各种各样的列表的制作方法(二) 前情回顾在上一篇博文《移动端各种各样的列表的制作方法(一)》中,我们通过两个简单的DEMO,演示了一下在移动端H5中的列表制作.不过,这两个演示还是太简单了.可能大家觉得不过如此嘛.这一章,我们将制作稍微复杂一点点的列表.如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上下文连贯,更容易理解本文的内容.带右箭头的列表这个示例,其实和上一张的第二个差不多,只是右边多了一个右箭头.我们要实现的效果,如下图所示:如上所示,在列表的右边,有一个右
H5移动端各种各样的列表的制作方法(三) 前情回顾在上一篇博文《移动端各种各样的列表的制作方法(二)》中,我们再通过两个DEMO,演示了一下在移动端H5中更多需求的列表制作.不过,看起来,好像还是蛮简单的.这一章,接着深入.如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上下文连贯,更容易理解本文的内容.带小图标的列表上面两章,我们做了一些普通的列表.而在移动端H5中,我们经常会做一行一个小图标的列表.这个DEMO,我们就来制作这种类型的列表.示例如下图所示.这里我就不使用小图标
H5移动端各种各样的列表的制作方法(四)前情回顾《H5移动端各种各样的列表的制作方法(一)》 《H5移动端各种各样的列表的制作方法(二)》 《H5移动端各种各样的列表的制作方法(三)》如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上下文连贯,更容易理解本文的内容.前面三章,都是说一个普通的列表应该如何去实现.难度由易到难,但总的来说,一看就能掌握.这一章,我们来做图文列表.普通两列图(图为正方形)文列表两列的图文列表是非常常见的.在JD\TB等电商移动端H5更是比比皆是.这里,
H5移动端各种各样的列表的制作方法(五)前情回顾《H5移动端各种各样的列表的制作方法(一)》 《H5移动端各种各样的列表的制作方法(二)》 《H5移动端各种各样的列表的制作方法(三)》 《H5移动端各种各样的列表的制作方法(四)》如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上下文连贯,更容易理解本文的内容.在第四章中,我们学习了如何来做一个双列的图文列表.但是,这个图文列表是有一定的局限的.局限就是,其中的图片必须为正方形.当然,在实际项目的实践中.这样也是够了的.但是,这个
H5移动端做一个不限个数的通栏按钮 前言在移动端h5的页面上经常需要一些通栏的按钮.当然,要做一个通栏的按钮这个事儿还是巨简单的.可是,产品经理和设计师永远都会给你添点麻烦.比如,明明是格式一样的按钮,但这里是一个通栏的按钮,到下面,就变成了通栏需要两个按钮,进到内页,就是三个按钮挤在一个通栏上.如果没有一个合理的解决方法,那么,无疑是非常恶心的.因为,我们必须写多个样式.而我们总想少写一些代码,那么,我们有没有什么好的解决方法来实现呢?其实是有的.下面,这篇博文,就让我们来实现这个挑战.所要的效果.可能
移动端页面大家都遇到过 viewport 的问题。关于 viewport 的文章有很多了，推荐给大家这两篇，写得非常详细。本文对 viewport 做一些补充手机屏幕手机屏幕属于硬件属性，我们无论是通过 JS 还是 meta 标签都是无法影响到它的。手机屏幕物理像素，也就是手机厂商们说的像素、分辨率、PPI这些。安卓常见的有 720X1280 , 1080X1920 等等iPhone 则是 iPhone5 640X1136，iPhone6 750X1334，iPhone6P 1080X1920手机屏幕逻辑
最近在研究用视频代替动画，用视频代替精灵动画，我们称这种视频叫做交互视频。传统的精灵动画：磁盘空间大，下载慢，尤其是在线播放，会更慢文件太多，在线播放的时候，太多http请求，会导致响应慢，或者行为失常因此，急需开发了一套技术，用视频代替精灵动画。我们称这种视频叫做交互视频传统视频的问题：传统视频，只能在方块形的区域中播放传统的视频，在iPad下是窗口播放，在iPhone下面，只能全屏播放传统的视频，播放的时候，一定会出现在最前端交互视频具有如下特点：在iPhone下面，不需要全屏播放，可以在一个区域中播
1.开发移动端，头部必要的配置123456789<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">（各属性值不在介绍，在开发中小米（2016年小米4）测试user-scalable=no是不起作用的）font-size,开发过程中是用Js计算的。公式 320/100=屏幕尺寸