移动开发准则

1.尽量使用单页面开发(SPA)

2.慎选UI框架

3.动画、特效使用(60fps)

**浏览器消耗最小的CSS属性**
位置:transform:translate(x,y,z)
大小:transform:scale(n)
旋转:transform:rotate(ndeg)
透明度:opacity:0~1

4.长度单位用rem

基本布局

流式布局

绝对定位布局



Flexbox布局(未来可能会成为主流)

CSS Grid layout(支持不完善)

HTML5开发和布局(待补充)的更多相关文章

  1. HTML5开发手机应用--viewport的作用

    在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢.在网上,大家会得到很多答案.我从网上搜集了部分介绍,整理一下,以留备用. <met ...

  2. html5文章 -- HTML5开发实例-网易微博手机Web App开发过程

    HTML5在国内外越来越受到互联网开发团队的青睐.国外,谷歌兴致勃勃地开发Chrome Web Store,微软发布了支持使用HTML5技术开发的“Irish Spring”主题网站,诺基亚斥巨资购得 ...

  3. HTML5开发规范

    1.总体规范——采用html5的结构标签进行页面布局,注意结构的语义化,并注意页面大纲的层级结构.使用css3.0进行样式的设计. a.网页大纲查询网址http://gsnedders.html5.o ...

  4. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  5. 读书笔记:《HTML5开发手册》--figure、time、details、mark

    这是补充HTML5基础知识的系列内容,其他为: 一.HTML5-- 新的结构元素 二.HTML5-- figure.time.details.mark 三.HTML5-- details活学活用 四. ...

  6. HTML5开发手机应用--viewport的作用--20150216

    在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢.在网上,大家会得到很多答案.我从网上搜集了部分介绍,整理一下,以留备用. <met ...

  7. HTML5 开发技能图谱skill-map

    # HTML5 开发技能图谱![HTML5 脑图](https://github.com/TeamStuQ/skill-map/blob/master/data/designbyStuQ/png-HT ...

  8. web前端学习(二)html学习笔记部分(10)-- HTML5构建应用布局和页面

    1.2.25  HTML5构建应用布局和页面 1.2.25.1  HTML5在移动开发中的准则 1.尽量使用单页面开发 2.慎重选择前端UI框架 3.动画.特效使用准则(60fps) 浏览器消耗最小的 ...

  9. 移动web开发之布局

    移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器,Q ...

随机推荐

  1. iframe刷新

    <div title="基本信息" style="padding:2px; ">       <iframe id="newsrc& ...

  2. c3p0数据源的第一次尝试

    开始补习 以前学习过的基础 正在尝试从c3p0 获取到connection 好的,首先上代码吧 public static DataSource ds = null; static { ComboPo ...

  3. 项目管理利器maven学习笔记(一):maven介绍及环境搭建

    maven介绍 maven下载与环境搭建 http://maven.apache.org/download.cgi# 解压到指定位置,比如我解压到D盘 设置maven环境变量 添加一个变量名,变量值为 ...

  4. Java框架spring 学习笔记(十二):aop实例操作

    使用aop需要在网上下载两个jar包: aopalliance.jar aspectjweaver.jar 为idea添加jar包,快捷键ctrl+shift+alt+s,打开添加jar包的对话框,将 ...

  5. mysql 创建备份表

    mysql 中对已有表进行备份用到的语句 CREATE TABLE table_name_1  SELECT * FROM table_name_2; 这个语句是创建表1并且复制表2的结构和数据到表1 ...

  6. 【Spring源码解析】—— 结合SpringMVC过程理解IOC容器初始化

    关于IOC容器的初始化,结合之前SpringMVC的demo,对其过程进行一个相对详细的梳理,主要分为几个部分: 一.IOC的初始化过程,结合代码和debug过程重点说明 1. 为什么要debug? ...

  7. [Mysql]一些知识点

    Mysql引擎类型 InnoDB: 行级锁->写性能略优:支持事务 MYISAM: 表级锁->读性能优:不支持事务 表示时间的类型 datetime 可表示时间范围大 1000-9999. ...

  8. 【aardio】回车换行符

    回车换行符 在计算机还没有出现之前,有一种叫做电传打字机(Teletype Model 33)的玩意,每秒钟可以打10个字符.但是它有一个问题,就是打完一行换行的时候,要用去0.2秒,正好可以打两个字 ...

  9. Heartbeat详解

    转自:http://blog.sina.com.cn/s/blog_7b6fc4c901012om0.html 配置主节点的Heartbeat Heartbeat的主要配置文件有ha.cf.hares ...

  10. Python第十七天 抽象类

    from abc import ABCMeta, abstractmethod class A(metaclass=ABCMeta): 称 A 为抽象类 @abstractmethod def tes ...