移动web开发准备知识点
1.1.1 流式布局
其实 流式布局 就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
这样的布局方式 就是移动web开发使用的常用布局方式
1.1.2 Viewport
- 我们猜想下pc页面在移动设备上显示情况。
放不下,缩放?
- 我们测试下pc页面在移动设备上显示。
默认的缩放的显示的
- 认识viewport
在移动端用来承载网页的这个区域,就是我们的视觉窗口,viewport(视口),这个区域可是设置高度宽度,可是按比例放大缩小,而且能设置是否允许用户自行缩放。
width:宽度设置的是viewport宽度,可以设置device-width特殊值
initial-scale:初始缩放比,大于0的数字
maximum-scale:最大缩放比,大于0的数字
minimum-scale:最小缩放比,大于0的数字
user-scalable:用户是否可以缩放,yes或no(1或0);
用meta标签把viewport的宽度设为device-width,同时initial-scale=1,user-scalable = 0就构建了一个标准的移动web页面
1.1.3 Retina屏
所谓“Retina”是一种显示技术,可以将把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度。
物理像素 像素点
屏幕尺寸 1px
1.2 首页切图
如果1:1的显示在移动设备当中 图标会失真
在行业中通用的设计稿 640px
目的 熟练的时候百分比布局
首页的布局:是以百分比布局为主的 定最小宽度和最大宽度的布局。
适用:图片比较多的首页,门户,电商 等。
1.3 移动端事件
Touch
touchstart:当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove:当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,
会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动
touchend:当手指离开屏幕时触发
touchcancel:系统停止跟踪触摸时候会触发。
例如在触摸过程中突然页面alert()一个提示框,此时会触发该事件,这个事件比较少用
触摸事件的响应顺序
1、ontouchstart
2、ontouchmove
3、ontouchend
4、onclick 300ms延时
Event
originalEvent (原生事件) 是jquery 封装的事件。
targetTouches 目标元素的所有当前触摸
changedTouches 页面上最新更改的所有触摸
touches 页面上的所有触摸
注意:在touchend事件的时候event只会记录changedtouches
移动web开发准备知识点的更多相关文章
- HTTP协议那些事儿(Web开发补充知识点)
HTTP协议 超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式.协作式和超媒体信息系统的应用层协议.HTTP是万维网的数据通信的基础. H ...
- Web开发常用知识点 - PHP
Ubuntu下面,如何用PHP代码获得系统的临时文件夹 用PHP方法 sys_get_temp_dir() 来取得系统的临时文件夹路径,比如Ubuntu下面,返回值为"/tmp".
- ASP.NET MVC开发:Web项目开发必备知识点
最近加班加点完成一个Web项目,使用Asp.net MVC开发.很久以前接触的Asp.net开发还是Aspx形式,什么Razor引擎,什么MVC还是这次开发才明白,可以算是新手. 对新手而言,那进行A ...
- Web开发知识点总结
前言:这是一篇简单的web开发知识点的总结,适用于刚开始学习编程的人来学习的.我是为了能够在熟记熟记这些知识点而总结的一篇文章. 1 什么是浏览器? (1) 浏览器就是接收浏览者的操作(打 ...
- web开发前端面试知识点目录整理
web开发前端面试知识点目录整理 基本功考察 关于Html 1. html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 2. h5中新增的属性; 如自定义属性data, ...
- 1+x 证书 Web 前端开发 MySQL 知识点梳理
官方QQ群 1+x 证书 Web 前端开发 MySQL 知识点梳理 http://blog.zh66.club/index.php/archives/199/
- 移动端web开发的一些知识点
整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...
- Web开发的小知识点
ServletConfig:用于读取配置文件信息 ServletContext:这是一个容器,代表一个web应用程序,多个Servlet可以通过这个容器共享数据信息(注意:这样的数据共享有线程安全问题 ...
- Web开发初探(系统理解Web知识点)
一.Web开发介绍 我们看到的网页通过代码来实现的 ,这些代码由浏览器解释并渲染成你看到的丰富多彩的页面效果. 这个浏览器就相当于Python的解释器,专门负责解释和执行(渲染)网页代码. 写网页的代 ...
随机推荐
- 许愿墙的搭建(基于Apache+php+mysql)
一.准备部分:CentOS 7 , Linux 文本 各自配置好环境 二. CentOS 7准备如下: yum install httpd -y #安装httpd yum install php ...
- Linux下面CentOS 7桌面的安装
搭建本地yum仓库的方法 http://www.cnblogs.com/lql123/p/5952788.html 1.yum grouplist #列出yum仓库里的软件组列表 2.yum grou ...
- kaggle数据挖掘竞赛初步--Titanic<原始数据分析&缺失值处理>
Titanic是kaggle上的一道just for fun的题,没有奖金,但是数据整洁,拿来练手最好不过啦. 这道题给的数据是泰坦尼克号上的乘客的信息,预测乘客是否幸存.这是个二元分类的机器学习问题 ...
- NoSQL生态系统——一致性RWN协议,向量时钟,gossip协议监测故障
13.5 一致性 在NoSQL中,通常有两个层次的一致性:第一种是强一致性,既集群中的所有机器状态同步保持一致.第二种是最终一致性,既可以允许短暂的数据不一致,但数据最终会保持一致.我们先来讲一下,在 ...
- blade and soul zone overview
The world of Blade and Soul, is a vast extension of land containing two continents (the Southern Con ...
- function,new function,Function,new Function 之间的区别
测试一: var fud01 = function() { var temp = 100; this.temp = 200; return temp + this.temp; } alert(typ ...
- artDialog 配置参数
http://blog.csdn.net/techbirds_bao/article/details/8531083
- 临界区 TRTLCriticalSection 和 TCriticalSection
临界区对象TCriticalSection(Delphi) 与 TRtlCriticalSection 的区别 TRtlCriticalSection 是一个结构体,在windows单元中定义: 是I ...
- Jquery的各种验证
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- twrp编译步骤 (CWM也差不多)
1.源码的跟目录执行:. build/envsetup.sh,构建编译环境 2.执行 make -j4 otatools,生成后面编译需要的工具 3.把boot或recovery放到home目录,执行 ...