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. ios基础操作

    ////  main.m  //文件名//  Day2-上课//工程名////  Created by 张开 on 16/1/5.//创建日期及创建人 ////单行注释:可以注释一段代码,起到了解释说 ...

  2. mybatis高级(2)_数据库中的列和实体类不匹配时的两种解决方法_模糊查询_智能标签

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "- ...

  3. jquery.validate:

    jqueryValidation: jquery-UI 小组组长;https://jqueryvalidation.org/;从页面性能的角度来说: 最好是把js的引入放在结束的body标签上面;基本 ...

  4. Objective-C( Foundation框架 一 NSDictionary (NSMutaleDictionary))

    NSDictionary 不可变的字典 创建字典的方法 // 创建字典的方式 NSDictionary *dy = [NSDictionary dictionaryWithObject:@" ...

  5. jmeter

    Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试但后来扩展到其他测试领域. 它可以用于测试静态和动态资源例如静态文件. ...

  6. 坑备忘error: expected class-name before '{' token

    今日重构之前的代码,修改了命名空间,然后一处派生的子类定义处总是总是报error: expected class-name before '{' token,网上查了查原因,出现这种情况大致有两种情况 ...

  7. Windows Store App 全球化:运行时响应语言变更

    在应用程序运行过程中,系统的语言.像素.对比度等系统设置可能会发生改变,应用程序应根据系统环境的改变及时做出适当的响应.为了解决这样的问题,可以在应用程序中为系统状态更改事件注册事件处理方法,当语言. ...

  8. UIImage

    //设置UIImage的圆角 + (UIImage *)imageNamed:(NSString *)name size:(CGSize)size cornerRadius:(CGFloat)corn ...

  9. 一个比较通用的makefile

    .PHONY : all clean DEBUG := YES CC := gcc CXX := g++ LD := g++ AR := ar rc HOME_PATH := $(realpath . ...

  10. 手机升级到iOS10,用Xcode7.3进行真机调试方法

    今天发布的正式版的iOS10,手机果断升级了,结果发现Xcode7.3不能真机调试了,原因是Xcode7.3里面没有iOS10的sdk,下面这个压缩包你可以下载下来放在你的Xcode7.3里面,当然了 ...