没想到这样又过了5个月了,近期辞职了,所以我有时间来做总结. 这段时间里我学习了很多东西,而且都是我们移动端webapp的同学值得去学习的. 我先告诉大家我这次写的总结,有以下内容: 1.body的背景图,img图片自适应,切图小技巧. 2.字体rem自适应问题. 3.@media的断点分析. 4.页面布局:盒子模型. 5.CSS3选择器和H5新标签的使用. 6.表单常用的正则验证. 7.CSS3的变形,渐变,动画. 以下是去取原生样式的方法. 8.单选多选去掉原生方法. 9.select下拉框…

移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了.本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决方案. 一.基本概念 (1) CSS pixels与device pixels CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容. device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色.亮度. 等值的 CSS pixels在手机屏幕上占多大的位置,这…

前言:在移动端WEBAPP开发中会遇到各种各样的问题,通过此文对遇到的问题做一个归纳总结,方便自己日后查询,也给各位前端开发友人做一个参考.   此文中涉及的问题是本人开发中遇到的,解决方案是本人思考和查询资料的结果,纯属于个人的见解,一个需求,纵有千百种实现方式,所以如有歧义,请温柔吐槽! 此文会持续更新,前期内容会比较杂乱,待Q&A积累到一定量后,会进行整理. css3 1.Q:css3动画在Ios运行正常,在Android无法运行.因‘-webkit-’前缀未正确书写导致  A:-webk…

我今年是由零基础开始入门的,刚好我第一家公司入职后就马上让我接手做ipad版的专题app了.(一入门就是移动端开发,是幸运也是艰辛的开始). 我是自学前端的,当然,对Bootstrap,JQuery mobile这2个UI框架肯定是熟悉他们是怎么使用,只是没必要再深入了.因为我当时应聘介绍自己懂这些框架都没有一家公司来招我,原因待会解释. 既然是零基础入门的话,那么我先分享下我该怎么学习? 我相信大部分人都了解一个房子的构造建成了吧,那么我用比如的方法来给自己去解释网站到底是个怎么回事? 后台其…

前言 在移动浪潮袭来的时候,小钗有幸进入框架组做webapp框架开发,过程中遇到了移动端的各种坑,也产生了各种激情,就我们公司的发展历程来说 第一阶段:使用传统方式开发移动站点,少量引入HTML5元素 第二阶段:框架化,使用jquery mobile框架,发现慢,组件不好管理,不好维护给搞掉了 第三阶段:jquery+Backbone的组合,最后为了瘦身将jquery换成了zepto 第四阶段:框架适应Hybrid版本,Hybrid相关频道与H5站点一套代码,业务扩展遍地开花 第五阶段:框架适应…

为什么要写这个 以前写过关于webapp自适应屏幕的文章(链接),不过写的大多数群众看不懂,所以来个图文并茂的版本.虽然只是一个简单的页面,不过在做的过程中也遇到了一些问题,也算是好事吧! 该示例github地址:https://github.com/iwangx/WebApp 访问地址:https://csssprite.herokuapp.com/ 准备 psd:这个是最重要的东西,用于测量尺寸,以及切图,我是不太同意切图的工作交给ui,自己切比较好,psd的分辨率我做的是640px的宽度,…

背景 很多小白知道什么是app,但是却不知道什么是webapp呢,webapp是指用HTML5编写的移动web应用 一个webapp可以在pc端,Android端,ios端进行运行 webapp开发的优点就是一套代码到处运行,缺点就是某些底层功能缺失,运行速度不如原生APP. WebApp 创建安卓应用 保证电脑中可以看到手机. 在安卓系统中设置开发者选项为启用USB调试. WebApp 打包HTML5 创建webView组件-用于显示网页内容 //创建浏览器核心对象 WebView wv =…

移动端字体使用: font-family: Helvetica,sans-serif;我看这也是天猫使用的 透过背景看其他元素模糊,自身元素不模糊:-webkit-backdrop-filter: saturate(180%) blur(20px);     background: rgba(0,0,0,0.5); input和disabled:在移动端对input框使用disabled属性,会导致元素里面value值在页面上被隐藏看不见,可以对元素使用css3效果pointer-event:n…

Vue.js2.0作为国内热门并广为人知的前端框架,其与其他主流框架的优势在此不做过多赘述.搭建框架步骤如下: 转自:http://www.jianshu.com/p/beae26e57b0f 安装Node.js 搭建框架需要使用最新稳定版Node.js,请选择LTS版本. tip1:如果本机有其它项目需要早期版本,建议利用NVM在本机分别部署多个版本的Node,以便在使用本框架时切换至最新稳定版即可. tip2:无法FQ的童鞋,建议使用cnpm,安装后在以下命令中将npm 替换成cnpm即可:…

webapp如何隐藏浏览器的导航栏 在webapp开发中,手机浏览器的导航栏会让我们的页面看起来很怪异,这个时候我们就需要将导航栏给隐藏起来,隐藏的方法十分简单,只需要在head头中加入以下几行代码就行: <!--UC强制全屏--> <meta name="x5-fullscreen" content="true"> <!--QQ强制竖屏--> <meta name="apple-mobile-web-app-ca…