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. 许愿墙的搭建(基于Apache+php+mysql)

    一.准备部分:CentOS 7  , Linux 文本   各自配置好环境 二. CentOS 7准备如下: yum install httpd -y #安装httpd yum install php ...

  2. Linux下面CentOS 7桌面的安装

    搭建本地yum仓库的方法 http://www.cnblogs.com/lql123/p/5952788.html 1.yum grouplist #列出yum仓库里的软件组列表 2.yum grou ...

  3. kaggle数据挖掘竞赛初步--Titanic<原始数据分析&缺失值处理>

    Titanic是kaggle上的一道just for fun的题,没有奖金,但是数据整洁,拿来练手最好不过啦. 这道题给的数据是泰坦尼克号上的乘客的信息,预测乘客是否幸存.这是个二元分类的机器学习问题 ...

  4. NoSQL生态系统——一致性RWN协议,向量时钟,gossip协议监测故障

    13.5 一致性 在NoSQL中,通常有两个层次的一致性:第一种是强一致性,既集群中的所有机器状态同步保持一致.第二种是最终一致性,既可以允许短暂的数据不一致,但数据最终会保持一致.我们先来讲一下,在 ...

  5. blade and soul zone overview

    The world of Blade and Soul, is a vast extension of land containing two continents (the Southern Con ...

  6. function,new function,Function,new Function 之间的区别

    测试一: var fud01 = function()  { var temp = 100; this.temp = 200; return temp + this.temp; } alert(typ ...

  7. artDialog 配置参数

    http://blog.csdn.net/techbirds_bao/article/details/8531083

  8. 临界区 TRTLCriticalSection 和 TCriticalSection

    临界区对象TCriticalSection(Delphi) 与 TRtlCriticalSection 的区别 TRtlCriticalSection 是一个结构体,在windows单元中定义: 是I ...

  9. Jquery的各种验证

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  10. twrp编译步骤 (CWM也差不多)

    1.源码的跟目录执行:. build/envsetup.sh,构建编译环境 2.执行 make -j4 otatools,生成后面编译需要的工具 3.把boot或recovery放到home目录,执行 ...