移动web基础
接触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基础的更多相关文章
- Golang友团无闻Go语言Web基础视频教程
教程内容:GO语言资料Golang友团无闻Go语言编程基础Golang友团无闻Go语言Web基础教程 Go语言Web基础教程列表:[Go Web基础]12Go Web 扩展学习.mp4[Go Web基 ...
- HT for Web基础动画介绍
在上一篇<基于HT for Web矢量实现3D叶轮旋转>一文中,我略微提了下HT for Web基础动画的相关用法,但是讲得不深入,今天就来和大家分享下HT for Web基础动画的相关介 ...
- Web基础开发最核心要解决的问题
Web基础开发要解决的问题,往往也就是那些框架出现的目的 - 要解决问题. 1. 便捷的Db操作: 2. 高效的表单处理: 3. 灵活的Url路由: 4. 合理的代码组织结构: 5. 架构延伸 缓存. ...
- web基础--html
WebBasic 1.web应用体系 课程大纲 1.web基础:做网页 2.结构: a.html 勾勒网页结构及内容 b.css ...
- java web基础环境搭建
java web基础环境包括:(1)servlet容器也即tomcat(2)jre即java程序运行环境 环境变量配置:分别下载jdk和tomcat安装包. jdk环境变量配置: 第一步:系统环境变量 ...
- Web基础知识和技术
WEB是一个外延广泛的概念,不单单指网站,乌徒帮专注拥有WEB界面的网站开发,帮助初学者或已经进入开发的朋友们提供参考讨论平台,然而并不一定能将所有的WEB知识讲全讲透,只是能满足初涉者的建站需求,能 ...
- java web基础 --- URL重定向Filter
java web基础 --- URL重定向Filter httpRequest.getRequestDispatcher("/helloWorld").forward(httpRe ...
- (0)写给Web初学者的教案-----Web基础
0,Web基础 一. What is the Web? Can It Eat? 很多同学可能都听说过一个名词叫做“Web”,这个词隐隐约约好像和我们上网相关.但是呢,又很难说的清楚.我们今天每位 ...
- web基础系列(五)---https是如何实现安全通信的
https是如何实现安全通信的 如果有不正确的地方,还望指出! web基础系列目录 总结几种常见web攻击手段极其防御方式 总结几种常见的安全算法 回顾 总结几个概念(具体描述可以看上一篇文章) 数字 ...
- web基础笔记整理(一)
一.程序的分层 1.界面层: 某种类型的应用程序 a.DOS(控制台运行) b.桌面应用程序--独立安装,独立运行 c.web类型--现在流行的 单机版:电脑上要安装,程序升级之后,电脑上也要升级-- ...
随机推荐
- Gym - 101845K 排序+概率
The UNAL programming coaches have lost a bet, they bet the 6 UNAL teams would occupy the first six p ...
- java 实现导出Excel文件
java 实现导出Excel(java生成 excel 并导出文件) 经常有有一些数据需要导出成 excel 格式 ,所以就需要实现啦 开始: 1.加入jar poi-3.6-20091214. ...
- Kibana6.x.x——导航权限控制入门
按如下图所示设置: 用该用户登录后,界面如图所示: 但遗憾的是,根据官方论坛的说法,其它的导航隐藏控制,暂时还不支持. 参考:https://discuss.elastic.co/t/hide-ina ...
- C#中web项目使用log4net日志
我准备把log4net的实现方法放在一个类库项目中,别的项目直接引用该类库,即可进行日志的记录,操作步骤如下: 1.下载log4net.dll文件 2.在解决方案下创建类库项目 3.把log4net. ...
- Android RecyView 滑动置指定位置
1,直接回到顶部 recyview.getLinearLayoutManager().scrollToPositionWithOffset(0, 0); 2,慢慢的回到顶部 private void ...
- my10_使用binlog2sql闪回DML操作
下载git clone https://github.com/danfengcao/binlog2sql.git 原理使用python连接到指定的库,读取要恢复表的表结构和对应的binlog日志,在b ...
- 9-----BBS论坛
BBS论坛(九) 9.1.权限和角色模型定义 (1)cms/models class CMSPermission(object): ALL_PERMISSION = 0b11111111 # 1.访问 ...
- Hbase 表操作
1. list 操作 2. 创建table column family, 3. 插入数据: put 'user' 3. 检索数据: scan table
- 基于webpack的vue项目路径别名
在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件: import userinfo from '../../../components/userinfo.vue'; 使用.. ...
- 登陆jq表单验证及jqcookie记住密码实例
<p><%@ page contentType="text/html; charset=utf-8"%> <%@taglib prefix=" ...