首页
Python
Java
IOS
Andorid
NodeJS
JavaScript
HTML5
【
05-移动端开发教程-CSS3兼容处理
】的更多相关文章
05-移动端开发教程-CSS3兼容处理
CSS3的标准并没有全部定稿,目前CSS3的标准分成了不同的模块,具体的标准由各个模块推动标准和定稿,标准制定的过程中,浏览器也在不断的发新的版本来兼容新的标准.浏览器有时会给一些在试验阶段或非标准阶段的css属性添加前缀, 这样开发者就可以使用 浏览器行为的改变不会破坏标准. 开发人员应等待包含无前缀属性,直到浏览器行为标准化. 1. 主流浏览器引擎前缀 -webkit- (谷歌, Safari, 新版Opera浏览器等)-moz- (火狐浏览器)-o- (旧版Opera浏览器等)-ms- (…
01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包括: CSS3新特性 新选择器 边框.背景升级.圆角.阴影 新的盒模型 渐变.动画.2D3D转换 伸缩布局.多列布局 新单位 在线字体图标 前缀应用.浏览器兼容.渐进增强 媒体查询 移动端适配开发方案 响应式布局开发方案 移动端js.触屏事件 zepto.js\bootstrap\iScroll.j…
03-移动端开发教程-CSS3新特性(下)
1. CSS3动画 1.1 过渡的缺点 transition的优点在于简单易用,但是它有几个很大的局限. transition需要事件触发,所以没法在网页加载时自动发生. transition是一次性的,不能重复发生,除非一再触发. transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有一个开始状态和结束状态. 一条transition规则,只能定义一个属性的变化,不能控制多个属性. CSS Animation就是为了解决这些问题而提出的. .box { /* 分别设置多…
02-移动端开发教程-CSS3新特性(中)
1. 新的背景 背景在CSS3中也得到很大程度的增强,比如背景图片尺寸.背景裁切区域.背景定位参照点.多重背景等. 1.1 background-size设置背景图片的尺寸 cover会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏. contain会自动调整缩放比例,保证图片始终完整显示在背景区域. 也可以使用长度单位或百分比,可以是两个值第一个是水平方向第二个是垂直方向. .box { width: 300px; height: 200px; border: 1px s…
11-移动端开发教程-zepto.js入门教程
Zepto.js是一个轻量级的针对现代浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 1. Why Zepto.js? API类似jQuery,熟悉jQuery可以无缝迁移到Zepto.js Zepto仅针对高版本现代浏览器设计了最小核心的通用库,代码体积小,尤其适合移动端开发. Zepto增加了针对移动端的触摸和手势相关的事件 Zepto模块化做的很灵活,可以自定义组合模块 2. Zepto.js下载 代码下载:zepto…
06-移动端开发教程-fullpage框架
CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js.我们经常见到一些全屏的特绚丽页面,手指或者鼠标滑动一下就是一整屏切换,而且还有各种效果.比如:全屏滑动案例 下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置. 1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件,它能很方便的制作出全屏网站,github地址. 主要功能有: 支持鼠标滚动. 支持前后退和键盘控制. 多个…
09-移动端开发教程-Sass入门
1. 引言 CSS3之前的CSS都大都是枚举属性样式,而编程语言强大的变量.函数.循环.分支等功能基本都不能在CSS中使用,让CSS的编程黯淡无光,Sass就是一种增强CSS编程的扩展语言(CSS4也可以期待),有了像Sass这种预处理语言后,CSS的编程不再局限在枚举属性了,可以有更广阔的舞台. 2. Sass的原理 Sass本质就是在CSS的语法的基础上增加了自定义的变量.循环.分支.函数.mixin.继承.运算等功能,让CSS编程变得异常强大. 当然浏览器是不认识Sass语法.开发人员写完…
大前端全栈CSS3移动端开发
作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正 本节课学习视频来源:https://www.bilibili.com/video/av26090013/?p=1 01-移动端开发教程-CSS3新特性(上) https://www.jianshu.com/p/1b93c0612b4d 02-移动端开发教程-CSS3新特性(中) https://www.jianshu.com/p/3988…
移动端开发ios和安卓兼容问题
移动端开发ios和安卓兼容问题 最近做移动端混合开的时候遇到一些安卓和iOS的兼容性问题,兼容想问题不仅在浏览器存在也在APP开发当中也会经常遇到这样的情况. 最近看了一下内容很不错的移动端开发相关的资料,自己总结出来了一些安卓和iOS兼容的知识点: 一.搜索确定问题 添加form元素,在提交的时候是input失去焦点 二.时间框选择问题 添加form元素 三.多图上传问题 安卓上不能多图上传,无法解决 四.浮动问题 尽量用盒子模型布局 五.音频自动播放问题,ios默认不自动播放 在docume…
Taurus.MVC 微服务框架 入门开发教程:项目集成:1、服务端:注册中心、网关(提供可运行程序下载)。
系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单. Taurus.MVC 微服务框架 入门开发教程:项目集成:1.服务端:注册中心.网关(提供可运行程序下载). Taurus.MVC 微服务框架 入门开发教程:项目集成:2.客户端:ASP.NET(C#)编程语言项目集成:应用中心. Taurus.MVC 微服务框架 入门开发教程:项目集成:3.客…
29.html5 移动端开发总结
手机与浏览器 浏览器: 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视网膜屏 自动的各种内核的浏览器,想想头都大了. 先说下浏览器.在中国有多少种浏览器? ie.百度.360.搜狗.火狐.欧朋.Chrome.谷歌.行者无疆.财猫省钱.遨游.Wise光速.UC.智慧.QQ.海豚...(大概有70-80多种) 五花八门,还好不用担心这都是表象.虽然浏览器各不相同但从浏览器…
html5 移动端开发
移动端开发总结 目录 1.手机与浏览器 2.Viewport(视窗) 3. 媒体查询 4.px,em,rem,pt 5.设备像素比devicePixelRatio 6.移动web中的图标及字体 7.移动端框架和库 手机与浏览器 浏览器: 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视网膜屏 自动的各种内核的浏览器,想想头都大了. 先说下浏览器.在中国有多少种浏…
web移动端开发技巧与注意事项汇总
一.meta的使用 1.<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览 2.winphone系统a.input标签被点击时产生的半透明灰色背景怎么去掉…
Senparc.Weixin.MP SDK 微信公众平台开发教程(十一):高级接口说明
这里所说的高级接口是指面向通过认证的服务号开通的高级功能. 高级功能大致可以分类为: 用户接口 分组接口 客服接口(有别于之前介绍的多客服) 群发接口 多媒体接口 二维码接口 模板消息接口(不是所有账号都可开通) OAuth2.0(相对比较复杂,后面会有专门介绍) 以上所有的接口都包含在Senparc.Weixin.MP.AdvancedAPIs命名空间下. 一些共同的操作 几乎所有的高级接口都需要用到AccessToken来通讯(注意,下面如果没有特殊说明的接口都需要这个AccessToken…
Senparc.Weixin.MP SDK 微信公众平台开发教程(十五):消息加密
前不久,微信的企业号使用了强制的消息加密方式,随后公众号也加入了可选的消息加密选项.目前企业号和公众号的加密方式是一致的(格式会有少许差别). 加密设置 进入公众号后台的“开发者中心”,我们可以看到Url对接的设置: 点击[修改设置],可以进入到修改页面: 加密的方式一共有3种: 明文模式,即原始的消息格式 兼容模式,明文.密文将共存,正式发布的产品不建议使用(因为仍然包含了明文,达不到加密的效果) 安全模式,这种模式下消息将会被加密,开发者的服务器可以通过官方给出的算法进行解密,得到明文模式下…
Protobuf实现Android Socket通讯开发教程
本节为您介绍Protobuf实现Android Socket通讯开发教程,因此,我们需要先了理一下protobuf 是什么? Protocol buffers是一种编码方法构造的一种有效而可扩展的格式的数据. 谷歌使用其内部几乎RPC协议和文件格式的所有协议缓冲区. protobuf 适用的语言 正宗(Google 自己内部用的)的protobuf支持三种语言:Java .c++和Pyton,很遗憾的是并不支持.Net 或者 Lua 等语言,但社区的力量是不容忽视的,由于protobuf确实比J…
boost.asio包装类st_asio_wrapper开发教程(2014.5.23更新)(一)-----转
一:什么是st_asio_wrapper它是一个c/s网络编程框架,基于对boost.asio的包装(最低在boost-1.49.0上调试过),目的是快速的构建一个c/s系统: 二:st_asio_wrapper的特点效率高.跨平台.完全异步,当然这是从boost.asio继承而来:自动重连,数据透明传输,自动解决分包粘包问题(必须使用默认的打包解包器,这一特性表现得与udp一样):只支持tcp和udp协议: 三:st_asio_wrapper的大体结构st_asio_wrapper.h:编译器…
web移动端开发技巧
一.meta的使用 1.<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览 2.winphone系统a.input标签被点击时产生的半透明灰色背景怎么去掉…
boost.asio包装类st_asio_wrapper开发教程(一)
一:什么是st_asio_wrapper它是一个c/s网络编程框架,基于对boost.asio的包装(最低在boost-1.49.0上调试过),目的是快速的构建一个c/s系统: 二:st_asio_wrapper的特点效率高.跨平台.完全异步,当然这是从boost.asio继承而来:自动重连,数据透明传输,自动解决分包粘包问题(必须使用默认的打包解包器,这一特性表现得与udp一样):只支持tcp和udp协议: 三:st_asio_wrapper的大体结构st_asio_wrapper.h:编译器…
移动端开发demo—移动端web相册(一)
本文主要是介绍开发移动端web相册这样一案例用到的前置知识. 一.移动端样式 移动端更接近手机原生的方式. 如下是一个angular mobile的demo的例子: 移动端demo做成这样的好处: 在手机端浏览器中打开,接近原生app应用. 打包成Android或者ios的app,以原生app呈现 二.移动端web开发调试工具 因为移动端主要的浏览器内核是webkit,所以可以用chrome开发.可以模拟UA和分辨率. 模拟触摸行为,注意touch和click区别. 也可以开启其他模拟. 三.移…
web前端开发教程系列-4 - 前端开发职业规划
前言 关于我:小天 1). 架构师,项目经理,产品经理 2). 中间件研发 3). VPCC 云计算基础平台管理 4). 智慧旅游 5). 智慧教育 6). 一次失败的创业体验(爱邂逅网) 一. 在开始规划职业之前,应该充分认识自己从事的行业,结合自己的价值观,树立合理目标,持之以恒 二. 人生阶段 1. 30岁之前: 2. 30岁以后:慢慢开始登上这个社会的大舞台,你这时候的目标就应该是一些具体的成就了,是做这些事情的副产品的时候了 三. 展望未来,个人认为在以下的前端技术领域,会产生较大的机…
分享六个基于Bootstrap的实用开发教程和模板演示
关于Bootstrap,相信大家一定不陌生,它已经成为现在主流产业的一个重要工具,Bootstrap提供了优雅的HTML和CSS规范,它基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件.今天,我们带来6款Bootstrap实现的几款小应用,希望可以对你们有所帮助! 移动为先的Bootstrap3 在线演示 Bootstrap3已经发布好几周了, 现在该是我们看看Bootstrap有什么新鲜内容的时候了…
boost.asio包装类st_asio_wrapper开发教程(转)
一:什么是st_asio_wrapper它是一个c/s网络编程框架,基于对boost.asio的包装(最低在boost-1.49.0上调试过),目的是快速的构建一个c/s系统: 二:st_asio_wrapper的特点效率高.跨平台.完全异步,当然这是从boost.asio继承而来:自动重连,数据透明传输,自动解决分包粘包问题(这一特性表现得与udp一样):只支持tcp和udp协议: 三:st_asio_wrapper的大体结构st_asio_wrapper.h:编译器版本测试,更新日志等: s…
Senparc.Weixin.MP SDK 微信公众平台开发教程(二十一):在小程序中使用 WebSocket (.NET Core)
本文将介绍如何在 .NET Core 环境下,借助 SignalR 在小程序内使用 WebSocket.关于 WebSocket 和 SignalR 的基础理论知识不在这里展开,已经有足够的参考资料,例如参考 SignalR 的官方教程:https://docs.microsoft.com/zh-cn/aspnet/core/signalr/introduction?view=aspnetcore-2.1 我们先看一下完成本教程内容后,在小程序内实现的 WebSocket 效果: 私有及群发消息…
移动端开发-viewport与媒体查询
首先要知道,在移动开发中,手机的浏览器会默认网页是为宽屏而设计的,它会缩小整个页面来适应屏幕. 1. 不使用viewport出现的问题 提到响应式设计,大家首先想到的可能是 Bootstrap , @media . @media(媒体查询)是CSS3的属性,利用它可以在不依赖其他库的情况下实现响应式设计.示例代码如下: @media screen and (min-width: 960px) { body { background-color: blue; } } @media screen a…
从架构师视角看是否该用Kotlin做服务端开发?
前言 自从Oracle收购Sun之后,对Java收费或加强控制的尝试从未间断,谷歌与Oracle围绕Java API的官司也跌宕起伏.虽然Oracle只是针对Oracle JDK8的升级收费,并释放了OpenJDK一直开源这份善意,但是如果没有各个大非Oracle的JVM.JDK和众多其它基于JVM的语言,Oracle这份善意能维持到什么时候可不好说. 大厂要从JVM和JDK的层面早做打算,而广大中小企业,就只能先从Java语言的层面,先找到Oracle以外的备胎.自从被谷歌钦定为Android…
微信支付 V3 开发教程(一):初识 Senparc.Weixin.TenPayV3
前言 我在 9 年前发布了 Senparc.Weixin SDK 第一个开源版本,一直维护至今,如今 Stras 已经破 7K,这一路上得到了 .NET 社区的积极响应和支持,也受到了非常多的宝贵建议,甚至代码的 PR,目前累计的代码贡献者数量已经超过350人,在此表示衷心的感谢! 我们也总在第一时间及时更新微信官方的各类接口,其中也包括微信支付. 如今,针对已经发布了一段时间的"微信支付V3",我们发布了一个完全重构后的全新版本:Senparc.Weixin.TenPayV3. 即使…
Taurus.MVC 微服务框架 入门开发教程:项目部署:6、微服务应用程序Docker部署实现多开。
系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 开源地址:https://github.com/cyq1162/Taurus.MVC 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单. Taurus.MVC 微服务框架 入门开发教程:项目集成:1.服务端:注册中心.网关(提供可运行程序下载). Taurus.MVC 微服务框架 入门开发教程:项目集成:2.客户端:ASP.NET Core(C#…
Taurus.MVC 微服务框架 入门开发教程:项目部署:7、微服务节点的监控与告警。
系统目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 开源地址:https://github.com/cyq1162/Taurus.MVC 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单. Taurus.MVC 微服务框架 入门开发教程:项目集成:1.服务端:注册中心.网关(提供可运行程序下载). Taurus.MVC 微服务框架 入门开发教程:项目集成:2.客户端:ASP.NET Core(C#…
ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑
前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 #是否,已经可以看到效果了. 对于分类ID列,通常显示的是分类名称,而不是ID值. 可是分类名称不在文章表里,在文章分类表,怎么关联格式化呢? 我们有文章分类表: 所以我们写个下拉配置: 然后在配置表头里把它配置上: 效果: PS:通过自定义语句来翻译下拉项的注意事项: 1:翻译项的数量在100以下,…