1.1.1 流式布局

其实  流式布局  就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。

这样的布局方式  就是移动web开发使用的常用布局方式

1.1.2 Viewport

  1. 我们猜想下pc页面在移动设备上显示情况。

放不下,缩放?

  1. 我们测试下pc页面在移动设备上显示。

默认的缩放的显示的

  1. 认识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开发准备知识点的更多相关文章

  1. HTTP协议那些事儿(Web开发补充知识点)

    HTTP协议 超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式.协作式和超媒体信息系统的应用层协议.HTTP是万维网的数据通信的基础. H ...

  2. Web开发常用知识点 - PHP

    Ubuntu下面,如何用PHP代码获得系统的临时文件夹 用PHP方法 sys_get_temp_dir() 来取得系统的临时文件夹路径,比如Ubuntu下面,返回值为"/tmp".

  3. ASP.NET MVC开发:Web项目开发必备知识点

    最近加班加点完成一个Web项目,使用Asp.net MVC开发.很久以前接触的Asp.net开发还是Aspx形式,什么Razor引擎,什么MVC还是这次开发才明白,可以算是新手. 对新手而言,那进行A ...

  4. Web开发知识点总结

    前言:这是一篇简单的web开发知识点的总结,适用于刚开始学习编程的人来学习的.我是为了能够在熟记熟记这些知识点而总结的一篇文章. 1       什么是浏览器? (1) 浏览器就是接收浏览者的操作(打 ...

  5. web开发前端面试知识点目录整理

    web开发前端面试知识点目录整理 基本功考察 关于Html 1. html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 2. h5中新增的属性; 如自定义属性data, ...

  6. 1+x 证书 Web 前端开发 MySQL 知识点梳理

    官方QQ群 1+x 证书 Web 前端开发 MySQL 知识点梳理 http://blog.zh66.club/index.php/archives/199/

  7. 移动端web开发的一些知识点

    整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...

  8. Web开发的小知识点

    ServletConfig:用于读取配置文件信息 ServletContext:这是一个容器,代表一个web应用程序,多个Servlet可以通过这个容器共享数据信息(注意:这样的数据共享有线程安全问题 ...

  9. Web开发初探(系统理解Web知识点)

    一.Web开发介绍 我们看到的网页通过代码来实现的 ,这些代码由浏览器解释并渲染成你看到的丰富多彩的页面效果. 这个浏览器就相当于Python的解释器,专门负责解释和执行(渲染)网页代码. 写网页的代 ...

随机推荐

  1. js动态替换数据的点击事件

    做项目时遇到的,具体是界面如下图:当点击X号时,出现删除.取消按钮,当点击删除时,这一行删除,当点击取消时又恢复到初始状态. 需要关注的问题是,js动态添加的删除.取消按钮的点击事件.当点击取消时恢复 ...

  2. jquery1:

    在jquery中:1.window.onload: --->$();所以一般jquery用如下开头: $(function(){ })2.获取元素:$('#div'):获取id为div的元素$( ...

  3. html/css小练习1

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAywAAAFgCAIAAADW6Wr0AAAgAElEQVR4nOzdd1xT5+L48bJlhUAGCY

  4. 定时器springMVC

  5. action和servlet的关系

      在struts2.0中,可以通过ServletActionContext.getRequest()获取request对象. 在action的方法中return一个字符串,该字符串对应struts. ...

  6. Oracle逻辑备份与恢复

      1. 备份的类型 按照备份方式的不同,可以把备份分为两类: 1.1 逻辑备份:指通过逻辑导出对数据进行备份.将数据库中的用户对象导出到一个二进制文件中,逻辑备份使用导入导出工具:EXPDP/IMP ...

  7. mac 解决eclipse OutOfMemoryError

    1.找到eclipse.ini文件 找到你的eclipse图标右击————>显示包内容-->contents -->macos -->eclipse.ini 2.修改内容 -s ...

  8. Highcharts 在低版本 IE 上使用注意事项及个人总结

    很多人经常遇到图表在主流浏览器上运行正常,在低版本IE(包括IE6.IE7.IE8等)下运行出错(图表显示不出来或显示不正常)的情况,这不是兼容性问题,而是 IE 浏览器自身的一些限制,我们只需要注意 ...

  9. 自定义动画css属性

    自定义动画: 1.animation-name(自定义动画名称) 元素所应用的动画名称,必须与@keyframes使用,名称由@keyframes定义. keyframes(动画关键帧):以@keyf ...

  10. FPGA作为从机与STM32进行SPI协议通信---Verilog实现 [转]

    一.SPI协议简要介绍 SPI,是英语Serial Peripheral Interface的缩写,顾名思义就是串行外围设备接口.SPI,是一种高速的,全双工,同步的通信总线,并且在芯片的管脚上只占用 ...