摘要：子组件： <template> <div class="app"> <input @click="sendMsg" type="button" value="给父组件传递值"> </div> </template> <script> export default { data () { return 阅读全文

摘要：直接上demo： <div class="container showdiv fadediv"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> .container { overflow: 阅读全文

摘要：手机拍照会给图片添加一个Orientaion信息（即拍照方向），如下： 用ios手机拍照，系统会给图片加上一个方向的属性， ios相机默认的拍照方向是后摄Home键在右为正，前摄Home键在左为正。 1代表正常的拍摄角度，ios横屏下拍摄、安卓机无论横屏竖屏拍摄，Orientaion的值都为1；但是 阅读全文

摘要：PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条，达到无法滚动的效果。 也就是说给body添加overflow：hidden属性即可，IE6、7下不会生效，需要给html增加overflow:hidden属性。 要制作这个效果在PC端非常简单，只需要设置html的高度为10 阅读全文

摘要：前端路由与单页页面 路由就是指随着浏览器地址栏的变化，展示给用户的页面也不相同。 传统的网页根据用户访问的不同的地址，浏览器从服务器获取对应页面的内容展示给用户。这样造成服务器压力比较大，而且用户访问速度也比较慢。在这种场景下，出现了单页应用。 单页应用，就是只有一个页面，用户访问一个网址，服务器返 阅读全文

摘要：概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点，首屏加载3秒完成或使用Loading 4. 基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB 5. Mobile侧因手机配置原因，除加载外 阅读全文

摘要：1. 何为硬件加速 就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。这样就可以使得animation与transition更加顺畅。 我们可以在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提升性能 现在大多数电脑的 阅读全文

摘要：在写移动端的APP或者页面时，经常会遇到惯性滚动与回弹效果。用插件iscroll可以轻松解决这个问题，大多数的移动框架也能轻松解决这个问题，它们内部都封装了这个效果。 一直好奇这个效果原生JS是怎么实现的，里面涉及到的弹力公式以及惯性效果还有一大堆临界点的判断，很是考验人。 在网上找了一下，看到有大 阅读全文

摘要：在做移动端页面的时候，经常会碰到一个div中分左右两个div，左侧div固定宽度或百分比，右侧div中内容左右溢出，需要左右滑动才可以浏览到全部内容，为此写了一个demo。 处理这个问题的核心关键点是右侧div需要设置固定宽度或者百分比，然后设置它的overflow为auto或者scroll。最重要 阅读全文

摘要：原生JS判断手势方向的解决思路： 1、滑动屏幕事件使用html5 的touchstart滑动开始事件和touchend滑动结束事件。 2、方向的判断，以起点做平面坐标系，与终点连线做直线，直线与x正半轴计算角度；我们以45度角为方向分割线，如：只要滑动角度大于等于45度且小于135度，则判断它方向为 阅读全文

摘要：移动端click会遇到2个问题，click会有200-300ms的延迟，同时click事件的延迟响应，会出现穿透，即点击会触发非当前层的点击事件。 为什么会存在延迟？ Google开发者文档中有提到： mobile browsers will wait approximately 300ms fro 阅读全文

摘要：补充一个基本知识，不许笑，1rem等于HTML中设置的字体大小（px） 首先，HTML 的 head 部分中加入如下代码： <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, 阅读全文

摘要：移动端媒体查询的一些尺寸参考 /*iphone4 4s*/ @media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ /* Styles */ } @media screen and (min- 阅读全文

摘要：开发HTML5的项目时发现页面元素为一串数字时，IOS手机会默认显示成蓝色字体，并且添加下划线，点击数字时会提示是否识别为手机号。 解决此问题的方法很简单，在head标签中添加下面的meta标记即可解决。 阅读全文

摘要：首先来看一下造成Retina边框变粗的原因 其实这个原因很简单，因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。 devicePixelRatio的官方的定义为： 阅读全文

摘要：在前端开发中我们常常需要从一个跳到另一个页面，并且将当前页面的数据传递过去，总结一下我的方法： 1 通过URL传值，不过有个缺点就是传输的值不能太大，因为浏览器对与URL的长度是有限制的。 首先定义getQueryString方法 function getQueryString(name) { va 阅读全文

摘要：首先，来看一下关于Android home键和back键区别 back键 Android的程序无需刻意的去退出,当你一按下手机的back键的时候，系统会默认调用程序栈中最上层Activity的Destroy()方法来，销毁当前Activity。当此Activity又被其它Activity启动起来的时 阅读全文

摘要：@charset "utf-8"; * { -webkit-box-sizing: border-box; box-sizing: border-box; } //禁止文本缩放 字体设置 取消touch高亮效果 html { width: 100%; height: 100%; margin: 0p 阅读全文

摘要：背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。 对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 1）首先，选 阅读全文

摘要：问题描述： 在html页面中获得后台传过来的一个时间并显示在页面上，我用getFullYear() ,getMonth(),getDate()分别获得了年月日在电脑上和三星手机上页面都能正确的显示时间，而苹果手机确显示NaN.NaN.NaN。 解决方法： 有兼容性问题,需要把中横线换成斜杠。 new 阅读全文