接触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. 转载《centos6安装nginx最详细步骤》

    出处:https://www.cnblogs.com/hltswd/p/6956264.html 第一步:在centos下面下载 nginx          wget http://nginx.or ...

  2. 老男孩Day5作业:电子银行购物商城

    1.作业需求: 模拟实现一个ATM + 购物商城程序 额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 支持多账户登录支持账户间转账 记录每月日常消 ...

  3. P1987 摇钱树

    题意:有n棵摇钱树,k天,每天可砍一棵并获得其金币    每棵树初始有$a_i$个金币,每天减少$b_i$个 问k天得到的最多金币数 这题很明显是DP(锻炼自己的机会来了QAQ) 设$f[i][j]$ ...

  4. 数据结构14:队列(Queue),“先进先出”的数据结构

    队列是线性表的一种,在操作数据元素时,和栈一样,有自己的规则:使用队列存取数据元素时,数据元素只能从表的一端进入队列,另一端出队列,如图1. 图1 队列示意图 称进入队列的一端为“队尾”:出队列的一端 ...

  5. Pre- and Post-order Traversals(先序+后序序列,建立二叉树)

    PAT甲级1119,我先在CSDN上面发布的这篇文章:https://blog.csdn.net/weixin_44385565/article/details/89737224 Suppose th ...

  6. sublime中正则替换

    匹配 <header></header>  ,  “.” 是匹配任意 非 换行 符号 而  \s\S 匹配任何符号 匹配div class为navbar 的 div <d ...

  7. sqlserver 服务器监控

    1.表锁 查看被锁的表:select request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName from ...

  8. 如何使用java代码进行视频格式的转换(FLV)

    如何使用java代码进行视频格式的转换(FLV) 一,前言 在给网页添加视频播放功能后,发现上传的视频有各种格式,那么就需要将他么转换成FLV,以很好的支持在线视频播放. 公司一直在使用中,配合使用, ...

  9. 用dango框架搭建博客网站

    1.我早先下载了Anaconda35.0.1.但是Anaconda自带的编辑器Spyder我用的不太熟练.所以还是使用Pycharm来编辑代码.我的Pycharm试用期已经到了,所以需要注册码来使用P ...

  10. Ranking relevance in yahoo search (2016)论文阅读

    文章链接 https://www.kdd.org/kdd2016/papers/files/adf0361-yinA.pdf abstract 点击特征在长尾query上的稀疏性问题 基础相关性三大技 ...