如果不是在移动端的话，建议使用SVG格式，更为清晰。 两个插件个人更喜欢 domtoimage ~ DEMO: https://codepen.io/CandyQiu/pen/XzmGNL?
2、页面切换时带渐变效果，体验感更强 3、支持最后一页右移消失和前面页面直接跳过 4、支持额外自定义，显示页面底下dots以及skip按钮与否。...2、框架目录 该框架主要有两大类： DWIntrosPageContentViewController引导页的每一个详情页面 DWIntrosPagesViewController相当于引导页的容器...，承载引导页的每一个详情页面。...long)nextPageIndex); return self.viewControllers[nextPageIndex]; } } 判断控制器数组中的控制器，如果是首页或者尾页，...self.historyX > 45) { [self skipButtonCliked]; } } } } 根据移动的偏移值
2016年刚接触移动端开发，刚开始比较疑惑，每次遇到问题都是到社区里提问或者吸取前辈的经验分享，感谢热衷于分享的开发者为前端社区带来欣欣向上的生命力。...本文结合先前写的文章和开发经验分享给大家，希望也能帮助刚步入移动端开发的新人解惑。以下会以其中一个以公积金页面开发项目作为例子，介绍移动端的一些常见问题和使用Vuejs作为lib进行多页开发的经验。...移动端自适应布局 在项目中移动端最常用的自适应布局方案就是flexbox结合rem。...下面附上微信端和浏览器端的效果图： 微信端：[微信端] 浏览器端： [浏览器端] Vuejs作为lib开发移动端页面 为何不使用SPA模式 一般移动端使用vue是为了数据交互频繁而且快速开发的页面，为什么不使用单页...为了快速开发，快速上线 项目其他成员不熟悉SPA，不熟悉webpack 参与项目时项目已使用多页开发，短时间无法重构 抛开使用单页的架构，开发多页应用时，一个页面交互逻辑与一个Vue实例对应。
1.移动端视口问题 视口是指浏览器的可视区域，移动端的视口到底是多宽呢？ 现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。...(注：实际上，这里说的375像素不是真实的物理像素，至于这个375像素是怎么来的，以及为什么大部分移动端的默认视口宽度是980，这就是另一个更加复杂的话题了，在此我们先不做讨论。)...我们可以使用谷歌浏览器的移动端调试工具，来访问百度的搜索结果，可以看到网页明显被缩小了，而且页面宽度定格在980px(不信的话大家可以试试)。...3.移动端尺寸 是同一个网页在不同尺寸手机中的效果。...注意：在移动端，如果使用了背景图(比如雪碧图)，记得用同样的方式调整背景图的尺寸。 题外话：移动端看上去是不是很麻烦？视口那么小，还要引入各种东西，里面要添加的又杂又乱，还要计算数值，是不是很麻烦？
前言 在平时的H5移动端开发时，我们难免会遇到各种各样的坑点，这篇文章就带着大家来看看怎么解决，文章较长，建议收藏方便以后查阅！...=no"> 默认情况下设备会自动识别任何可能是电话号码的字符串,设置telephone=no可以禁用这项功能,设置不识别邮箱和地址也同理 h5网站input设置为type=number的问题 h5网页input...rtl; } 问题2:禁用select默认箭头 ::-ms-expand修改表单控件下拉箭头,设置隐藏并使用背景图片来修饰 select::-ms-expand { display:none; } 移动端...false); 小结: 1.audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常 2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome...document.addEventListener('touchstart', function(){ audio.play(); }, false); ios系统不支持动画暂停样式(animation-play-state) H5页面一般都会有
ROLE移动端酷炫运营页 2014年开始，我在我们部门负责移动端酷炫运营页面，也就是俗称的H5的研发工作。...制作一个H5运营页 可以把页面拆分为三个部分。 一个是通用部分，也就是约定俗成的交互逻辑。 另一个是个性化部分。个性化部分之所以区别于定制化，是因为它是一个可配置的选项。...而定制化部分则是一个完全和其它市面上的东西都不一样的脑洞。 通用部分 翻页器 翻页器实现了在H5中可以通过手指滑动来一页一页查看的逻辑。...一个常规H5页面的基本结构如图可见，首先有很多不同页面，当真正发布出一个页面的时候，通过手指滑动去一页页查看。页面进入时，播放下方的动画。 在我们平台中使用了一个时间线的模式来管理动画的次序。...定制化部分 用js脚本实现定制化功能 我们平台里的js脚本目前是支持zepto、style和script。可以通过简单的接口获取页面元素，直接操作DOM。
我们使用Django的Admin二次定制一个图形化界面,首先我们把语言设置为中文简体....',self.id) Cpu_Speed.short_description = "CPU利用率" Mem_Speed.short_description = "Mem利用率" 继续定制...manage.py migrate python manage.py createsuperuser 保存后启动,Django并访问http://127.0.0.1:8000/admin登录后我们依次看一下定制效果
一、移动端浏览器 ---- 移动端浏览器 比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 : UC / QQ / Opera / Chrom.../ 360 / 百度 / 搜狗 / 猎豹 国内的浏览器 基本都是 根据 Webkit 内核进行修改而来的 , 目前没有自主研发的内核 , 因此 移动端开发适配比较简单 , 兼容主流的浏览器 , 即兼容...Webkit 内核浏览器即可 ; 二、移动端屏幕分辨率 ---- 移动设备的尺寸类型非常多 , Android / iOS 手机分辨率种类很多 , 参考 Android 屏幕适配 专栏 ; 【Android...Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI ) 博客 ; 前端开发时 , 不需要关注上述 屏幕像素密度 dpi , 密度无关像素 dp , 只需要关注 像素尺寸 px 即可 ; 三、移动端网页调试方法
随着移动互联市场的迅速发展，目前除了pc端网站外，移动网站也逐渐成为各企业的竞相争逐的重点对象。虽说移动网站其作用和pc端网站作用功能都差不多，但其在网站设计上还是有所区别。...pc网站重再产品的展示，而移动网站则更加注重实用性。要知道之所以称之为移动，那肯定是要更加快速的便捷。所以，当网站设计师在进行移动网站详情页制作时，需要更加了解用户的心理。...4、质感：善用产品的质地或包装的质感纹理，并提取出来做详情页背景用。 5、成分：食品或者美装护肤品详情页最喜欢用产品的成分来做文章了，比如说饮料就用产品成本直接区分口味。...，在排版布局时不能过于浮夸，那么在设计排版布局时都有哪些好的形式呢： 1、左右对比形：专题页，常见于需要表现出PK或者VS对决类的专题页设计。...这些所做的一切，都是为了能够讨好进入到自己移动端网站来浏览客户，希望客户在阅读了自己的网站之后能够成为真实的客户，转化为真实的资源。也希望以上的分享可以帮到你。
那么此处建议垂直居中可以使用flex布局来做，比如： height: 36px; display: flex; align-items: center; justify-content: center; 线上的移动端页面垂直居中我大部分都是这么写的...，三端表现都很一致。
在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1....PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素，所以网页文字非常小，为了快速让网页还原到原来的大小，Safari最新引入了双击缩放功能...移动端特有的touch事件 由于移动端设备大都具备触摸功能，所以移动端浏览器都引入了触摸(touch)事件。...封装移动端tap事件 由于点击事件经常使用，如果用click会有延迟问题，一般我们会用touch事件模拟移动端的点击事件, 以下是封装的几个事件，仅供参考。...---- 参考文章： 移动端web开发---Touch事件详解 MDN:TouchEvent 移动端前端常见的触摸相关事件touch、tap、swipe等整理
大家好，我是光城，今天来点轻松点的话题，玩一下github个人页，在个人页里面我们可以填上自己的一些信息，放一些图片什么的，以及仓库的详情，个人技术栈等等，还是非常有趣的，这里先放上自己的github地址...： https://github.com/Light-City 下面是定制化后的效果： ?
实习期间主要在写微信端H5，遇到的最大问题就是适配各个不同尺寸的屏幕。公司就我自己一个前端，只能自己摸索着来。...在很早之前找解决方案的时候就看到这篇文章了——使用Flexible实现手淘H5页面的终端适配。
移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一 1.移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试...是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC端页面1px就等于1个物理像素，但移动端不同 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比 3.2...4.1单独移动端页面（主流） 通常情况下，网址域名前面加m（mobile）可以打开移动端。...通过设备判断，如果是移动端打开，则自动跳转到移动端页面。...，需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 1.移动端浏览器 移动端浏览器基本以webkit内核为主，所以就考虑webkit兼容性问题。
移动端基础 移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一 1.移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试...是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC端页面1px就等于1个物理像素，但移动端不同 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比 3.2...4.1单独移动端页面（主流） 通常情况下，网址域名前面加m（mobile）可以打开移动端。...通过设备判断，如果是移动端打开，则自动跳转到移动端页面。...，需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 1.移动端浏览器 移动端浏览器基本以webkit内核为主，所以就考虑webkit兼容性问题。
移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一 1、移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 搭建本地...是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC端页面1px就等于1个物理像素，但移动端不尽相同 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比...4.1单独移动端页面（主流） 通常情况下，网址域名前面加m（mobile）可以打开移动端。...通过设备判断，如果是移动端打开，则自动跳转到移动端页面。...，需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 5.1移动端浏览器 移动端浏览器基本以webkit内核为主，所以就考虑webkit兼容性问题。
判断移动端或pc端 经常在项目中会有支持 pc 与手机端需求。并且pc与手机端是两个不一样的页面。这时就要求判断设置，根据不同的设置跳转不同的路由。 先写个方法： ?..._isMobile()) { alert("移动端"); //移动端跳转路由 } else { alert("pc端"); //Pc端跳转路由
一、移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端 与 移动端 访问的是不同的页面 , 目前的 京东 / 淘宝 等电商网站移动端页面采取的该方案 ; 响应式页面兼容移动端...: 开发难度较大 , PC 端与移动端访问的是相同的页面 ; 1、单独制作的移动端页面 通过设备类型判断要加载的网页类型 , 一般会在域名前添加 m 打开移动端 , 如京东域名为 jd.com , 使用...m.jd.com 可以访问其移动端页面 ; 如京东商场 , 在浏览器中输入 https://www.jd.com/ 域名 , 进入的是 PC 端的网页 , 在浏览器中 , 按 F12 进入调试模式..., 选择手机设备调试 , 输入 https://www.jd.com/ 域名 , 会自动跳转到 https://m.jd.com/ 手机端页面中 , 京东后台会认为是移动设备请求页面 , 自动跳转到移动端页面...; 2、响应式页面兼容移动端 响应式页面兼容移动端 的原理是 通过 判断当前的 屏幕宽度 , 改变当前的页面样式 , 适应不同的设备 ; 如果不断地缩小浏览器的窗口的宽度 , 网页会不停地自适应修改布局
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1....优点：布局快速简单方便、在移动设备中水平表现良好差异不大。 缺点：由于垂直方向像素恒定，可能水平很宽的屏幕会被拉伸变形严重，另外在高倍屏幕上1像素可能被多倍的物理像素显示，会变的非常粗。...2.1 横向百分比 + 纵向高度固定 首先看案例： 拉勾网移动端首页顶部的logo区域，不管如何变化浏览器的宽度，高度不变化，宽度自适应。 ?...space-between; line-height: 40px; } 10秒钟定制职位...这样优点非常多，首先开发人员直接像素还原，开发效率很高，也没有移动端1像素的问题。也是老马推荐大家使用的方式。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
