移动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的解释器,专门负责解释和执行(渲染)网页代码. 写网页的代 ...
随机推荐
- ios基础操作
//// main.m //文件名// Day2-上课//工程名//// Created by 张开 on 16/1/5.//创建日期及创建人 ////单行注释:可以注释一段代码,起到了解释说 ...
- mybatis高级(2)_数据库中的列和实体类不匹配时的两种解决方法_模糊查询_智能标签
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "- ...
- jquery.validate:
jqueryValidation: jquery-UI 小组组长;https://jqueryvalidation.org/;从页面性能的角度来说: 最好是把js的引入放在结束的body标签上面;基本 ...
- Objective-C( Foundation框架 一 NSDictionary (NSMutaleDictionary))
NSDictionary 不可变的字典 创建字典的方法 // 创建字典的方式 NSDictionary *dy = [NSDictionary dictionaryWithObject:@" ...
- jmeter
Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试但后来扩展到其他测试领域. 它可以用于测试静态和动态资源例如静态文件. ...
- 坑备忘error: expected class-name before '{' token
今日重构之前的代码,修改了命名空间,然后一处派生的子类定义处总是总是报error: expected class-name before '{' token,网上查了查原因,出现这种情况大致有两种情况 ...
- Windows Store App 全球化:运行时响应语言变更
在应用程序运行过程中,系统的语言.像素.对比度等系统设置可能会发生改变,应用程序应根据系统环境的改变及时做出适当的响应.为了解决这样的问题,可以在应用程序中为系统状态更改事件注册事件处理方法,当语言. ...
- UIImage
//设置UIImage的圆角 + (UIImage *)imageNamed:(NSString *)name size:(CGSize)size cornerRadius:(CGFloat)corn ...
- 一个比较通用的makefile
.PHONY : all clean DEBUG := YES CC := gcc CXX := g++ LD := g++ AR := ar rc HOME_PATH := $(realpath . ...
- 手机升级到iOS10,用Xcode7.3进行真机调试方法
今天发布的正式版的iOS10,手机果断升级了,结果发现Xcode7.3不能真机调试了,原因是Xcode7.3里面没有iOS10的sdk,下面这个压缩包你可以下载下来放在你的Xcode7.3里面,当然了 ...