APP应用前端开发
1、开发手机APP前端要重视meta标签的编写;
2、注意HTML5标签在前端开发中的使用;
3、前端制作要舍弃CSS float属性(可flex布局),用绝对定位不利于页面布局的扩展;
4、APP前端制作利用CSS3边框背景属性。
5、尺寸大小 http://blog.sina.com.cn/s/blog_18b319a350102yhcz.html
6、-webkit-tap-highlight-color:transparent:移动端没有hover伪类,但可以使用这个实现高亮效果,通过给a、html、body添加。
7、display: table-cell。
8、取消a标签在移动端点击时出现的蓝色背景:
-webkit-tap-hightlight-color: transparent;
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
使用图片作为a标签的点击按钮时,当触发touchstart的时候,去掉出现灰色背景:
a, a:hover, a:active, a:visited, a:link, a:focus {
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0,0,0,0);
outline: none;
background: none;
text-decoration: none;
}
改变选中的背景颜色:
::selection { background: #fff; color; #333 }
::-moz-selection { background: #fff; color: #333 }
::-webkit-selection: { background: #fff; color: #333 }
去掉iOS input框点击时的灰色背景:
-webkit-tap-highlight-color: transparent;
9、关于背景图片问题:
移动端设置页面背景填满整个屏幕(html{}或body{}),在设计时,将background放置在外部样式不行,放在行内样式才可现实。background: url(/images/zhuceBG.jpg) no-repeat fixed center center / 100% 100%;
10、padding代替margin
修改网页发现问题:比如移动端网页,在屏幕分辨率为375 * 640的情况下,不要设置html、body或一个大的容器(相当于html/body)margin为正值,如果容器的box-sizing值不是border-box的情况下。这时容器的值宽或高由分辨率
值加上margin值,从而会水平或上下拉动。不对box-sizing值只是针对(border/padding/content)设置而已,对
margin不起作用。所以最外围容器(包含整个页面内容)最好不要设置margin正值,可以以padding代替。
11、element:after { content:""; display:block; height:0; visibility:hidden; clear:both}
之前一直觉得对伪类“:after”来清除浮动的方法还不会使用,以至于没有效果。但是突然看到一篇文章,言外之意是,本来父元素的高度没有撑开,而在这个元素添加伪类清除浮动后,父元素有高度了,也说明清除浮动有效。
12、移动端字体默认最小为12px,使用transform的scale()可以进行缩放,缩放后字体不是居左显示的,设置transform-origin:left即可。
APP应用前端开发的更多相关文章
- 在做APP前端开发时应注意的一些问题
在做APP前端开发时应注意的一些问题 在整个app开发流程中,app前端开发是一个必不可少的环节,也是一个在app开发过程中重量级的角色.说到这,那么在app应用的前端开发中,又要注意什么问题呢?一. ...
- APP前端开发时应注意的一些问题
在做APP前端开发时应注意的一些问题 在整个app开发流程中,app前端开发是一个必不可少的环节,也是一个在app开发过程中重量级的角色.说到这,那么在app应用的前端开发中,又要注意什么问题呢?一. ...
- 学web前端开发写给新手的建议,超实用!
01 前面的话 如今我们使用的互联网,客户端与服务器端的交互无时无刻不在发生.比如我们在浏览器打开网页,浏览器就是客户端,将网页数据发过来的也就是服务器.其实服务器,并没有什么特别的,也就是一台昼夜不 ...
- 优秀前端开发教程:超炫的 Mobile App 3D 演示
今天,我们想与您分享一个实验性的3D效果.它涉及到一个3D移动设备和一些移动应用程序截图.点击切换按钮时,我们将让移动设备转动并移动每个画面,使我们能看到一个分层的视图.你可能之前没见过这种应用程序演 ...
- 而桌面app向来是web前端开发开发人员下意识的避开方
web前端语言的发展有目共睹, 从原来的pc web, 到后来的mobile SAP, 再到 nodejs,全站工程师应运而生. js快速而且稳健的发展让人不得不重视, 相应的前端开发人员的地位也越来 ...
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】
<Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- web前端开发培训和自学 哪种选择更适合你
web前端相对于其他软件开发是比较容易入门的,但是如果深入学习就比较困难了,这门技能需要从业人员掌握一定的设计.代码.交互技能和一些SEO技能,容易入门还涉及这么多知识和技能,那学习web前端开发到底 ...
- 【Yeoman】热部署web前端开发环境
本文来自 “简时空”:<[Yeoman]热部署web前端开发环境>(自动同步导入到博客园) 1.序言 记得去年的暑假看RequireJS的时候,曾少不更事般地惊为前端利器,写了<Sp ...
- Web前端开发的前景与用处
随着时代的发展,现在从事IT方向的人有很多,所以励志要成为前端开发工程师的人有很多.当然也有很多人在犹豫不知道该从事哪个方向,我今天就是来给大家分析一下Web前端开发的前景.包括工作内容,发展前景和薪 ...
随机推荐
- java-設計模式概述
什麽是設計模式?? 软件设计中常见问题的典型解决方案. 能根据需求进行调整的预制蓝图, 可用于解决代码中反复出现的设计问题. 模式并不是一段特定的代码, 而是解决特定问题的一般性概念. 你可以根据模式 ...
- nginx 负载均衡详解
配置文件 upstream abc { server 192.168.2.188:8080 weight=1 max_fails=3 fail_timeout=30; 定义集群,weight=权重轮询 ...
- CSS中宽度与高度
div的高度 div由的高度是由它里面的字体乘以字体建议的行高确定,跟这个字体大小没有关系(不同字体相同字体大小,会影响div的高度.)如过明确告诉浏览器行高,div高度就是行高. 文字两端对齐: 文 ...
- javascript新手实例1-DOM基本操作
学习javascript好多同学不知道怎么上手,跟着网上的新手教程做了一遍又觉得javascript很简单,但是真正自己用起来又觉得写不出什么东西,我觉得学习最好的方法就是跟着有趣的例子做,所以我们的 ...
- 如何使用vue-cli搭建好的项目
本人是一枚前端小白,也是从零开始学习vue.js.由于闲着蛋疼,写一点自己的经验,可能有点low.是新手想上道的话,可以看看,如果有大神,也可以给我指导一下,小生感激不尽. 关于如何使用vue-cli ...
- 【uniapp 开发】文字缩略css
文字超出两行后显示省略号 display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; ...
- PAT B1013 数素数
输入样例: 5 27 输出样例: 11 13 17 19 23 29 31 37 41 43 47 53 59 61 67 71 73 79 83 89 97 101 103 解题思路: 从2开始 ...
- 单例设计模式(Singleton)
一.单例设计模式介绍 所谓类的单例设计模式,就是采取一定的方法保证在整个的软件系统中,对某个类只能存在一个对象实例, 并且该类只提供一个取得其对象实例的方法(静态方法) 例如:Hibernate的Se ...
- Python实现简单用户注册信息管理系统
运行效果: 注意:运行前请在同一目录下创建一个userdata.bin用于保存用户数据 源代码: 1 # coding:utf-8 2 ''' 3 用户注册信息管理系统 4 功能包括: 5 1.查看全 ...
- B03. BootstrapBlazor实战 10分钟编写数据库维护项目
demo演示的是Sqlite驱动,FreeSql支持多种数据库,MySql/SqlServer/PostgreSQL/Oracle/Sqlite/Firebird/达梦/神通/人大金仓/翰高/华为Ga ...