1.自适应屏幕

<meta name="viewport" id="viewport"
content="width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1">
2.重置页面所有元素
/*reset*/
html {
-webkit-text-size-adjust: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
word-break: break-all;
height: 100%;
font-size: 62.5%;
color: #999; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section {
margin: 0;
padding: 0; } article, aside, details, figcaption, figure, footer, header, menu, nav, section {
display: block; } audio, canvas, video {
display: inline-block; } body, button, input, select, textarea {
font: 400 1.2rem/1.2 "Hiragino Sans GB W3","Hiragino Sans GB",SimHei,sans-serif; } a, input, button, select, textarea {
-webkit-tap-highlight-color: transparent; } textarea {
resize: none;
overflow-y: auto; } img {
border: 0;
vertical-align: middle;
padding: 0;
margin: 0; } iframe {
display: block; } del {
text-decoration: line-through; } ul {
list-style: none; } ol {
list-style-position: inside; } h1, h2, h3, h4, h5, h6 {
font-weight: 500; } sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; } sup {
top: -0.5em; } sub {
bottom: -0.25em; } a {
text-decoration: none;
color: #999; }
input,textarea,button{outline:none} table {
border-collapse: collapse;
border-spacing: 0; }
textarea::-webkit-input-placeholder {
color: #ccc !important;
}
3.规则谨记
①字体用rem,其余所有元素设置均用px。
②慎用表格。使用ul>li*3来代替。
③不要使用图片填充屏幕,特别是100%,容易引发意想不到的bug。
④使用div时切记一条反常理做法:div{width:100%;margin:0 2px},会造成纵向滚动。
⑤input,img等单标签要闭合。养成良好的习惯。
4.模态窗口简单设计
.modal-bg{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:20;
background-color:black;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity:0.8;
display:none;
}
<!--80%透明度遮罩层 -->
<div class="modal-bg"></div>
今天就先写这么多吧。

WebApp开发经验的更多相关文章

  1. webapp开发经验总结

    webapp开发的大趋势之下,本人收集整理了一写关于webapp开发的经验,欢迎大家补充指正. 关于link <link rel="apple-touch-startup-image& ...

  2. webapp开发经验和资料

    开发经验: 开发资料: 1. http://xuui.net/librarys/webapps/webapp-development-of-commonly-used-code-snippets.ht ...

  3. 移动H5开发入门教程:12点webAPP前端开发经验

    如果你是一名移动H5前端开发人员,25学堂的小编认为下面的分享的12点webAPP前端开发经验是你必须掌握的基础知识点.算是一篇移动H5开发入门教程吧! 1. viewport:也就是可视区域.对于桌 ...

  4. 小型移动 webApp Demo 知识点整理

    包括内容: css初始化.css全局设置.常用meat标签.rem适配.flex布局.相关技巧(手势库使用.多行截字.1像素边线.点击状态.placeholder居中等) reset 引用 norma ...

  5. Cordova webapp实战开发:(7)如何通过简单的方法做到,不重新发布APP来修复bug、增加功能、或者躲开苹果的一些严格审核?

    到<Cordova webapp实战开发:(6)如何写一个iOS下获取APP版本号的插件?>为止,我们已经大体学会了如何使用Cordova了,那些都是使用Cordova的开发者必备的技能. ...

  6. (任寒韬)WebApp群主 - MobileTech 资料

    web app : http://www.lightapp.cn/brand/index/4101 https://github.com/jtyjty99999/mobileTech/blob/mas ...

  7. webApp添加到iOS桌面

    iOS中的safri浏览器可以将一个网页添加到桌面,当做一个独立的应用运行. 当然,这里我们不讨论怎么去做一个webApp,这需要html5的相关知识和开发经验.这里我们只讲webApp添加桌面后到启 ...

  8. 移动前端webApp开发点滴积累20140524

    #webApp开发几点体会(移动前端) ##前言 本文旨在记录本人涉足移动webApp开发的几点体会,欢迎分享与指正. ##再见,IE678 移动设备,Android跟iPhone是主流,即使是win ...

  9. WebApp 安全风险与防护课堂开课了!

    本文由葡萄城技术团队于原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 2018 网络安全事故频发,从数据泄露.信息窃取,到 DDOS 攻击.勒索 ...

随机推荐

  1. java cache过期策略两种实现,一个基于list轮询一个基于timer定时

    最近项目要引入缓存机制,但是不想引入分布式的缓存框架,所以自己就写了一个轻量级的缓存实现,有两个版本,一个是通过timer实现其超时过期处理,另外一个是通过list轮询.       首先要了解下ja ...

  2. Python ->> 第一个Python程序

    #coding:utf-8 #print 'input your name, please' #name = raw_input('请输入你的名字:'.decode('utf-8').encode(' ...

  3. 如何添加或删除ubuntu用户和组【转】

    转自:http://blog.csdn.net/sin90lzc/article/details/7525670 在创建用户时,需要为新建用户指定一用户组,如果不指定其用户所属的工作组,自动会生成一个 ...

  4. Simple Factory vs. Factory Method vs. Abstract Factory【简单工厂,工厂方法以及抽象工厂的比较】

    I ran into a question on stackoverflow the other day that sort of shocked me. It was a piece of code ...

  5. [CF189A]Cut Ribbon(完全背包,DP)

    题目链接:http://codeforces.com/problemset/problem/189/A 题意:给你长为n的绳子,每次只允许切a,b,c三种长度的段,问最多能切多少段.注意每一段都得是a ...

  6. 【转】Android Gson的使用

    Android Gson 2014 年 05 月 22 日 android 目前的客户端大都有和服务端进行交互,而数据的格式基本就是json了,于是在Android开发中就经常用到json解析,方便的 ...

  7. C#处理文件流的转换

    //----引入必要的命名空间 using System.IO; using System.Drawing.Imaging; //----代码部分----// private byte[] photo ...

  8. IOS开发之不同版本适配问题2(#ifdef __IPHONE_7_0)(转载)

    继续说说ios不同版本之间的适配 先说一个东西:在xcode当中有一个东西叫targets,苹果的官方文档是这样说的: A target specifies a product to build an ...

  9. 介绍 Android 的 Camera 框架

    总体介绍 Android Camera 框架从整体上看是一个 client/service 的架构,有两个进程:一个是 client 进 程,可以看成是 AP 端,主要包括 JAVA 代码与一些 na ...

  10. scala学习笔记(6):闭包

    到本章这里,所有函数文本的例子仅参考了传入的参数.例如,(x: Int) => x > 0里,函数体用到的唯一变量,x > 0,是x,被定义为函数参数.然而也可以参考定义在其它地方的 ...