接触retina屏

基础知识(移动Web的基础知识)
排版
布局(高效的移动Web布局)
开发效率
终端交互优化

pixel像素基础
viewport视图
viewport_meta标签
viewport_coding

pt, px
Viewport
640*960
initial-scale=1.0
devicePixelRadio
ppi=√(1136*1136 + 640*640)/4=326ppi

示例:
640*1136的图片能不能在iphone5上完全显示?
iphone5的分辨率 640*1136
iphone5的分辨率是320*568

移动端不能用固定布局,因为要适应设备。
高效布局方案: Flex弹性盒子布局
根据元素的不同,自动填充容器

响应式设计
1. 百分比布局
2. 弹性图片(图片外面有容器)
img {
max-width: 100%
}
3. 重新布局,显示与隐藏

不好:性能不好,不同设备都要下载一大套css代码
好处:减少重复开发

相对单位
em: 是根据父节点的font-size为相对单位【不推荐】
rem:是根据html的font-size为相对单位【推荐】

em 在多层嵌套下,变得非常难以维护
rem 能统一全局

终端交互优化
对click事件say no
tap事件基础
touch触摸事件
下拉加载

使用zepto.js框架的touchstart和touchend模拟tap事件【zepto框架个人强烈不推荐!bug太多!你自己要去处理框架的bug还有你自己的bug,很O疼!】
(参考jquerymobile)

Touch基础事件
触摸才是移动设备的交互的核心事件
touchstart
touchmove
touchend

移动端弹性滚动【优化用户体验】
body {
  overflow:scroll;
  -webkit-overflow-scrolling: touch;
}

Android不支持原生的弹性滚动,
但可以借助第三方库iScroll来实现

也可以自己模拟下拉刷新的动画,原理:向下滑动到一定的程度,显示动画并刷新加载页面。

移动web基础的更多相关文章

  1. Golang友团无闻Go语言Web基础视频教程

    教程内容:GO语言资料Golang友团无闻Go语言编程基础Golang友团无闻Go语言Web基础教程 Go语言Web基础教程列表:[Go Web基础]12Go Web 扩展学习.mp4[Go Web基 ...

  2. HT for Web基础动画介绍

    在上一篇<基于HT for Web矢量实现3D叶轮旋转>一文中,我略微提了下HT for Web基础动画的相关用法,但是讲得不深入,今天就来和大家分享下HT for Web基础动画的相关介 ...

  3. Web基础开发最核心要解决的问题

    Web基础开发要解决的问题,往往也就是那些框架出现的目的 - 要解决问题. 1. 便捷的Db操作: 2. 高效的表单处理: 3. 灵活的Url路由: 4. 合理的代码组织结构: 5. 架构延伸 缓存. ...

  4. web基础--html

    WebBasic 1.web应用体系 课程大纲 1.web基础:做网页     2.结构:         a.html             勾勒网页结构及内容         b.css     ...

  5. java web基础环境搭建

    java web基础环境包括:(1)servlet容器也即tomcat(2)jre即java程序运行环境 环境变量配置:分别下载jdk和tomcat安装包. jdk环境变量配置: 第一步:系统环境变量 ...

  6. Web基础知识和技术

    WEB是一个外延广泛的概念,不单单指网站,乌徒帮专注拥有WEB界面的网站开发,帮助初学者或已经进入开发的朋友们提供参考讨论平台,然而并不一定能将所有的WEB知识讲全讲透,只是能满足初涉者的建站需求,能 ...

  7. java web基础 --- URL重定向Filter

    java web基础 --- URL重定向Filter httpRequest.getRequestDispatcher("/helloWorld").forward(httpRe ...

  8. (0)写给Web初学者的教案-----Web基础

    0,Web基础 一.    What is the Web? Can It Eat? 很多同学可能都听说过一个名词叫做“Web”,这个词隐隐约约好像和我们上网相关.但是呢,又很难说的清楚.我们今天每位 ...

  9. web基础系列(五)---https是如何实现安全通信的

    https是如何实现安全通信的 如果有不正确的地方,还望指出! web基础系列目录 总结几种常见web攻击手段极其防御方式 总结几种常见的安全算法 回顾 总结几个概念(具体描述可以看上一篇文章) 数字 ...

  10. web基础笔记整理(一)

    一.程序的分层 1.界面层: 某种类型的应用程序 a.DOS(控制台运行) b.桌面应用程序--独立安装,独立运行 c.web类型--现在流行的 单机版:电脑上要安装,程序升级之后,电脑上也要升级-- ...

随机推荐

  1. Gym - 101845K 排序+概率

    The UNAL programming coaches have lost a bet, they bet the 6 UNAL teams would occupy the first six p ...

  2. java 实现导出Excel文件

    java 实现导出Excel(java生成 excel 并导出文件) 经常有有一些数据需要导出成   excel  格式 ,所以就需要实现啦 开始: 1.加入jar poi-3.6-20091214. ...

  3. Kibana6.x.x——导航权限控制入门

    按如下图所示设置: 用该用户登录后,界面如图所示: 但遗憾的是,根据官方论坛的说法,其它的导航隐藏控制,暂时还不支持. 参考:https://discuss.elastic.co/t/hide-ina ...

  4. C#中web项目使用log4net日志

    我准备把log4net的实现方法放在一个类库项目中,别的项目直接引用该类库,即可进行日志的记录,操作步骤如下: 1.下载log4net.dll文件 2.在解决方案下创建类库项目 3.把log4net. ...

  5. Android RecyView 滑动置指定位置

    1,直接回到顶部 recyview.getLinearLayoutManager().scrollToPositionWithOffset(0, 0); 2,慢慢的回到顶部 private void ...

  6. my10_使用binlog2sql闪回DML操作

    下载git clone https://github.com/danfengcao/binlog2sql.git 原理使用python连接到指定的库,读取要恢复表的表结构和对应的binlog日志,在b ...

  7. 9-----BBS论坛

    BBS论坛(九) 9.1.权限和角色模型定义 (1)cms/models class CMSPermission(object): ALL_PERMISSION = 0b11111111 # 1.访问 ...

  8. Hbase 表操作

    1. list 操作 2. 创建table column family, 3. 插入数据: put 'user' 3. 检索数据: scan table

  9. 基于webpack的vue项目路径别名

    在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件: import userinfo from '../../../components/userinfo.vue'; 使用.. ...

  10. 登陆jq表单验证及jqcookie记住密码实例

    <p><%@ page contentType="text/html; charset=utf-8"%> <%@taglib prefix=" ...