youhebuke225的博客

全面阻止事件行为当我们全面禁止事件默认行为的时候，在移动端a标签是无法进行跳转的在谷歌移动端模拟器中可以跳转<a href="http://www.baidu.com">百度一下</a><a href="http://www.baidu.com">百度一下</a><a href="http://www.baidu.com">百度一下</a><a href="http://www.baidu.com">百度一

情景我们将会写一下代码.box{ position: absolute; width: 200px; height: 200px; background-color: red; opacity: 0.5;}<div class="box"></div><!-- 注意加上http前缀 --><a href="http://www.baidu.com">点我一下，看我跳不跳转</a>当我们把上面的代码写好，去点击的时候，

移动端为什么要用transform代替left等属性详情点击

移动端rem适配一般我们使用rem进行移动端适配的时候会结合着媒体查询，在不同的屏幕下修改不同的字体大小步骤将设计图划分为10等份或者15等份。一般设计图为750px，如果划分为10等份那么一份就是75px,划分为15等份，一份就是15px新建common.less文件，这是一个专门来适配的文件。在这里设置根标签字体的大小，并通过媒体查询来修改根标签字体的大小我们关注的屏幕的宽度有320px、360px、375px、384px、400px、 414px、424px、480px、54

1 搭建结构1.1 搭建基本结构搭建轮播图的大体结构 <div id="wrap"> <div class="carousel-wrap"> <ul class="list"> <li> <a href="javascript:;"> <img src="img/01.jpg"/> </a> </li> <li&

原理我们一般会使用媒体查询和缩放来解决1像素边框和2x和3x图的问题，这里我们使用less来解决一像素边框.bottom-border-1px(@color){ position relative border none &:after{ content :''; position: absolute; left: 0; bottom: 0; width: 100%;

问题在ios Safari浏览器中按钮的样式会显示很圆解决其实我们只需要添加属性button{ -webkit-appearance : none ; /*解决iphone safari上的圆角问题*/ }详情点击

问题当我们设置一个<a>标签，点击他的时候背景会出现高亮<a href="###">###</a>解决问题想要解决这个问题我们可以直接添加a{ -webkit-tap-highlight-color:transparent;}

移动端特点他会自动匹配看起来像电话号码或者邮箱的数字，并添加电话连接，点击是会询问用户的自动识别功能关闭如果不想使用这个自动识别的功能，我们可以用一下代码来禁止<meta name="format-detection" content="telephone=no,email=no">人为添加当我们禁止自动识别功能之后，如果还想使用户点击某个号码进行相应操作可以使用<a>标签 <a href="tel:110">10086</a>

小白都能看明白的移动端viewport详解发现问题当我们在pc端写下一个盒子，观察他在pc端、移动端的渲染情况（有些编辑器默认加上了viewport标签适配，请将他注释掉，文中会解释他的用处）* { margin: 0; padding: 0;}#box { width: 300px; height: 300px; background-color: #008000;}<div id="box"></div>pc端移动端不能发现在移动端盒子

目录移动端事件总结1. click2. touch事件模型3. TouchEvent3.1 触摸相关属性3.2 触摸事件坐标移动端事件总结1. clickclick事件在移动端使用是会有300ms左右的延迟，但是可以通过第三方的库进行解决 详情点击2. touch事件模型共四种:只在移动端触发touchstart:手指触摸到屏幕会触发touchmove:当手指在屏幕上移动时，会触发touchend:当手指离开屏幕时，会触发touchcancel:可由系统进行的触发,一些更高级别的事件发生

Vue中移动端的适配1. 视口的适配在index.html中引入viewport适配 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">2.解决点击延迟方案一在index.html中引入<script src="https://as.alipayobject