作者：阡ゼ陌 移动端适配 相对于PC端来说，移动端设备分辨率百花齐放，千奇百怪，对于每一个开发者来说，移动端适配是我们进行移动端开发第一个需要面对的问题。...idealviewport为浏览器定义的可完美适配移动端的viewport，固定不变，可以认为是设备视口宽度device-width。...user-scale=no禁止缩放 所以现在我们知道，这段在移动端常见的代码的意思，即将visualviewport和layoutviewport设置为idealviewport的值；这样我们在移动端就不会出现滚动条...键盘弹出与使用transform属性的情况在移动端是很常见的，所以需要谨慎使用position:fixed。 推荐使用flex flex，即弹性布局，移动端兼容性较好，能够满足大部分布局需求。...常用组件库 VantUI是有赞开源的一套轻量、可靠的移动端Vue组件库；支持按需引入、主题定制、SSR，除了常用组件外，针对电商场景还有专门的业务组件，如果是开发电商项目的话，推荐使用。
1.移动端视口问题 视口是指浏览器的可视区域，移动端的视口到底是多宽呢？ 现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。...我们可以使用谷歌浏览器的移动端调试工具，来访问百度的搜索结果，可以看到网页明显被缩小了，而且页面宽度定格在980px(不信的话大家可以试试)。...3.移动端尺寸 是同一个网页在不同尺寸手机中的效果。...这样一来，就要求我们在开发移动端的页面时，当遇到字体大小、宽高、margin、padding等尺寸类的属性时，不能设置固定的像素值。 注：border边框大小除外 (既然有问题，怎么会没有解决办法呢？...注意：在移动端，如果使用了背景图(比如雪碧图)，记得用同样的方式调整背景图的尺寸。 题外话：移动端看上去是不是很麻烦？视口那么小，还要引入各种东西，里面要添加的又杂又乱，还要计算数值，是不是很麻烦？
Vue.js项目中封装轮播图组件 前言 一、了解原生js移动端的事件 二、轮播图实战 三、效果图 结束语 前言 今天我在vue.js项目实战开发过程中遇到了实现轮播图效果的问题，因为不想因为一个轮播图而引用整个...jquery，而且我还发现自己根本就不清楚移动端的一些事件，所以我就进行了一些资料查找，并最终解决了这个问题，接下来跟大家分享一下我的解决问题的过程....公众号：前端印象 不定时有送书活动，记得关注~ 关注后回复对应文字领取：【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】 一、了解原生js移动端的事件 原生js移动端的事件一共有四种...因为vue.js项目中都是以组件的形式来开发的，所以我这里就以一个组件的形式来展示，有疑问的可以留言询问。...结束语 2020.05.01 这是我在vue.js实战项目开发第二天中遇到的问题，希望我遇到的问题能对大家有所帮助， 如果大家感兴趣，可以关注一波，每天跟大家分享一些问题和解决办法，大家也可以跟我分享一下你们的经验
在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1....PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素，所以网页文字非常小，为了快速让网页还原到原来的大小，Safari最新引入了双击缩放功能...移动端特有的touch事件 由于移动端设备大都具备触摸功能，所以移动端浏览器都引入了触摸(touch)事件。...封装移动端tap事件 由于点击事件经常使用，如果用click会有延迟问题，一般我们会用touch事件模拟移动端的点击事件, 以下是封装的几个事件，仅供参考。...---- 参考文章： 移动端web开发---Touch事件详解 MDN:TouchEvent 移动端前端常见的触摸相关事件touch、tap、swipe等整理
1.前言 到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。...如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨：移动web开发问题和优化小结。...尤其是在移动端，请求显得特别珍贵，在网速的不好的情况下，请求就是珍贵中的珍贵。...，后来自己找不到方法，直接在sf上提问了，大家可以去参考下：移动端轮播图，上下滑动的时候不触发页面的滚动 ps：滑动我没有使用什么库，是我根据touchstart和touchend的移动距离来判断是左右滑动或者上下滑动...2.web移动端页面性能优化方案 3.Web前端优化最佳实践及工具集锦 4.移动前端系列——移动页面性能优化 5.Web性能优化：图片优化 16.小结 我在移动web(手机网站)上，遇到的问题，暂时就是上面这些了
对于pc端的前端开发以及html5和css3学习过后对页面布局更加熟练了,对于现在开发更多倾向于移动端开发,对于移动端开发和传统PC开发又有所不同,下面简单认识下移动端开发概况!...对于学习移动端开发首先要了解下面三个概念(设备独立像素,物理像素,和像素比),下面简单介绍下这三个概念!...上面说过的设备独立像素如何改变,下面就看看使用移动端开发的meta的viewport标签 <meta name="viewport" content="width=device-width,initial-scale...minimum-scale=1,maximum-scale=1//最大最小缩放比例,一般不用设置 <em>移动</em><em>端</em><em>开发</em>的meta标签一般只需要一下的属性就行 我们不喜欢用户进行缩放,直接我们在<em>开发</em>过程中,转换成对应的物理像素能较好的观察哦设备的显示效果
cnpm) 包管理工具 yarn add axios -S cnpm install axios -S -S: --save-dev 生产环境的依赖 （dependencies） -D: --dev 开发环境的依赖...在命令窗口中使用vue ui，弹出页面 使用模块 多环境变量配置（开发、测试、生产） axios 请求拦截，响应拦截 (API统一管理) sass 预编译 rem移动端适配方案 vant-ui 按需导入...我们写入请求拦截和响应拦截，进行API的统一管理，请求分两种形式：分别为get , post 形式进行传参 3.sass预解析：意思就是说将浏览器不能识别的css代码转换成浏览器能识别的 4.rem：针对于移动端的适配问题...初始化样式问题 —我们可以在(reset.css中引入项目) 例如 box-sizing:border-box 三、路由 我们经常用的有 路由嵌套 路由传参 路由守卫 keep-alive 四、组件化开发...1.组件拆分问题：我们可以封装公共组件、功能性组件 2.组件开发：父传子、子传父、兄弟传值 五、webpack配置的打包优化（vue.config.js） 发布者：全栈程序员栈长，转载请注明出处：https
就是类似于 PC端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到 Touch事件结合 js去实现，效果如下： ? 1. 准备工作 什么是移动端的 Touch事件？...在移动端 Touch事件可以细分成三种，分别是： touchstart、 touchmove和 touchend，并且 touch事件必须要用 addEventListener去监听。...基本结构 此案例模拟的是移动端的一种滑动菜单效果。...问题分析 虽然第二次是继续向下移动了一段距离，但是触摸结束后，最终是将此时的差值，重新赋值给了 ul的 Y轴偏移，所以视觉上“跳了上去”。 ?...maximum-scale=1.0, minimum-scale=1.0"> 移动端
移动端开发模式 现今流行的移动端开发模式共有三种： web（H5） Hybrid(混合开发) Native(原生） 下面来剖析一下三种模式的优缺点： 1.开发难度： 无疑web和Hybrid...难度要小于原生app开发，而且可以利用现有的Web开发工具和工作流程。...2.移动设备本地API访问： Hybrid可以通过jsAPI访问移动设备的摄像头，GPS等。 原生App 可以通过原生编程语言访问设备的所有功能。...原生App跨平台性能差。 三者中只有移动web对搜索引擎友好，与在线营销无缝整合。 5.消息推送： 只有混合App 和原生App支持推送消息，增加用户忠诚度。...但是——–存在必有价值，原生的性能依然是最好的。对于性能要求高的游戏类App还是应该使用原生开发模式。
移动端开发规范 引言：最近得空，整理一些平时工作中要求的开发规范，浅薄之处还请大家多指教。...目录 移动端开发规范 代码规范 基本原则 代码清晰 一致性 通用规范 类命名 方法命名 变量命名 常量命名 枚举类型命名 图片命名 通用规范 通用设计规范 开屏页版本号 版本检查 开屏页广告 推送 通用测试用例及处理规范...实现步骤： iOS： 使用原生。 Android： 在极光管理界面中新增相关app。 将相关SDK添加到APP项目中。...处理方式 逻辑覆盖 请求网络接口 所有请求网络场景 正常返回数据 用户断网 提示用户检查网络 移动网络 接口异常 提示用户重试 wifi网络 无网络权限 提示用户无权限，引导用户设置 关闭网络授权...分支使用 开发人员应该在自己的开发分支（例如：justin_dev）或者功能分支（login）上进行开发，完成开发之后，汇集到develop分支上，一般develop不直接进行修改。
移动端适配 相对于PC端来说，移动端设备分辨率百花齐放，千奇百怪，对于每一个开发者来说，移动端适配是我们进行移动端开发第一个需要面对的问题。 ...在移动端我们经常可以在head标签中看到这段代码： 通过meta标签对的设置，定义了页面的缩放比例；要了解这些参数的意义，我们需要先知道几个视口宽度的意义。 ...所以现在我们知道，这段在移动端常见的代码的意思，即将和设置为的值；这样我们在移动端就不会出现滚动条，网页内容可以比较好的展示出来，在这个前提下我们再考虑页面的适配问题。 ...键盘弹出与使用属性的情况在移动端是很常见的，所以需要谨慎使用:fixed。 推荐使用flex flex，即弹性布局，移动端兼容性较好，能够满足大部分布局需求。...常用组件库 VantUI是有赞开源的一套轻量、可靠的移动端Vue组件库；支持按需引入、主题定制、SSR，除了常用组件外，针对电商场景还有专门的业务组件，如果是开发电商项目的话，推荐使用。
移动端适配 相对于PC端来说，移动端设备分辨率百花齐放，千奇百怪，对于每一个开发者来说，移动端适配是我们进行移动端开发第一个需要面对的问题。 ...所以现在我们知道，这段在移动端常见的代码的意思，即将和设置为的值；这样我们在移动端就不会出现滚动条，网页内容可以比较好的展示出来，在这个前提下我们再考虑页面的适配问题。 ...键盘弹出与使用属性的情况在移动端是很常见的，所以需要谨慎使用:fixed。 推荐使用flex flex，即弹性布局，移动端兼容性较好，能够满足大部分布局需求。...important;" /> 第三方组件 移动端各种组件、插件已经相对完善，在项目开发中重复造轮子是一件很不明智的事情；开发项目时我们可以借助第三方组件、插件提高我们的开发效率。 ...常用组件库 VantUI是有赞开源的一套轻量、可靠的移动端Vue组件库；支持按需引入、主题定制、SSR，除了常用组件外，针对电商场景还有专门的业务组件，如果是开发电商项目的话，推荐使用。
bind('scroll',isScrollBottom);},2000); } } $(window).bind('scroll',isScrollBottom); 原生
最近项目不是很忙，自己就用原生js写了一个简单的移动端轮播图的小demo，可实现自动轮播和手势滑动轮播，然后就把它记录到个人博客里。还有很多不足的地方，希望多多指出，以便改进。...device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 移动端...slideshow.css *, ::before, ::after{ padding: 0; margin: 0; -webkit-box-sizing: border-box;/*兼容移动端主流浏览器...*/ box-sizing: border-box; -webkit-tap-highlight-color: transparent;/*清除移动端点击高亮效果*/ } body{...font-family:Microsoft YaHei,sans-serif;/*移动端默认的字体*/ font-size: 14px; color: #333; } ol,ul{
移动端开发技巧 01 一、样式按组件或板块分文件写再合成 ①设置各种变量 采用scss或者less来写css代码有很多好处。这里就不详细说。...例子如图： 02 二、页面适应性布局 个人认为，适配移动端比较好的布局方式是百分比+rem布局。 百分比的优势在于，同一个百分比的真实尺寸会跟随屏幕大小变化。...但是如果你用真机，也就是用移动设备看的时候，你会发现其实滚动条是不会出现的。所以有时候做移动的东西，还是需要真机测试一下比较靠谱啊。
移动端适配 相对于PC端来说，移动端设备分辨率百花齐放，千奇百怪，对于每一个开发者来说，移动端适配是我们进行移动端开发第一个需要面对的问题。...idealviewport为浏览器定义的可完美适配移动端的viewport，固定不变，可以认为是设备视口宽度device-width。...user-scale=no禁止缩放 所以现在我们知道，这段在移动端常见的代码的意思，即将visualviewport和layoutviewport设置为idealviewport的值；这样我们在移动端就不会出现滚动条...键盘弹出与使用transform属性的情况在移动端是很常见的，所以需要谨慎使用position:fixed。 推荐使用flex flex，即弹性布局，移动端兼容性较好，能够满足大部分布局需求。...，在项目开发中重复造轮子是一件很不明智的事情；开发项目时我们可以借助第三方组件、插件提高我们的开发效率。
前言 之前上家公司主要是做移动端 H5 开发的，但相关技术和配套体系已经很成熟了，很难接触到背后的这套体系。 在现在的公司也做了一些零散的 H5 页面，有一些相关实践。...说起移动端开发，就绕不开 Hybrid 技术。这篇文章主要是引申出一些概念，方便后续介绍 js bridge、deeplink 等知识。...Native App 在说 Hybrid App 之前不得不先讲到 Native App，这是最为传统的一种移动端开发技术。...在 iOS 和安卓中官方的开发语言是 oc/swift、java/kotlin，使用这些开发出来的 App 一般称之为原生应用。 ...因为是在浏览器里面运行，所以天然支持跨平台，一套代码甚至很容易支持移动端和 PC 端不需要安装到手机里面，上线发版也比较容易。
border-box;``-webkit-box-sizing: border-box; 点击高亮 清除-webkit-tap-highlight-color: transparent; 在ios上移动端浏览器默认的外观加上...-webkit-appearance: none;才能给按钮/输入框添加自定义样式 禁用长按页面时弹出菜单img,a {-webkit-touch-callout: none;} 移动端常见布局 流式布局...伪元素选择器，交集选择器，内层选择器之前要加**&** .nav { .logo { color: green; } &::before { content: " "; } } 复制代码 三.rem实际开发适配方案
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
