接触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. SAP 740GUI客户端快捷方式取消密码登陆

    客户端电脑:WIN10 专业版64位. 1. 进入注册表编辑器(regedit) .进入如下路径:HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\SAP\SAPLogo ...

  2. 转载《centos6安装nginx最详细步骤》

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

  3. Golang 连接 MongoDB使用连接池

    可以免费试用 MongoDB ,500MB 平时做测试没有问题啦,连接数据库可能因为网络有点慢,但是我们是测试啊,不在乎这点吧~ 这是怎么申请试用版的博客,感谢这位大佬.注册好用起来很方便~ 传送门 ...

  4. 《图解HTTP》阅读笔记--第四章--HTTP状态码

    第四章.返回结果的HTTP状态码前言:状态码的职责是告诉用户服务器端描述返回的请求,以便用户判断服务器处理是否正常. 状态码由三位数字和原因短语组成,其中三位数字的首位指定了响应类别:---1xx 接 ...

  5. 7 . 动态sql-choose

    choose-when-otherwise 只能满足一个when 中的条件,互斥的条件,不能同时存在 mapper.xml <select id="selectstateByTitle ...

  6. 使用esp32-Arduino+PubSubClient+mqtt 上传数据到中移动OneNet

    使用esp32-doit-dev-v1开发板,测试mqtt协议, 发布(publish)到onenet 平台.注意:1.使用的mqtt arduino 客户端是 pubsubclient 库.其默认是 ...

  7. spring-redis 存储数据

    package com.fndsoft.bcis.utils; import org.springframework.beans.factory.annotation.Autowired;import ...

  8. C# repeater控件序号绑定

    做项目列表经常会需要列表有一个序号列,根据控件自身的属性就可以很方便的实现这个功能,如下图 这个不能用翻页功能,如果翻页重新刷新控件的话,序号会又重新开始!

  9. linux 学习 (基于ubuntu)

    一.   在虚拟机中安装ubuntu 可参考如下博客:   https://blog.csdn.net/u014337397/article/details/80751753 二.  关于linux的 ...

  10. zabbix 安装使用

    zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决 ...