移动web开发

屏幕

屏幕尺寸：我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度

像素是一个相对长度单位，像素没有固定的长度

像素密度

用PPI值来表示屏幕每英寸的像素数量，ppi应用广泛，dpi在安卓设备比较常见

屏幕尺寸固定，当ppi越大，像素的实际大小就会越小，当ppi越小，像素实际大小就越大

设备独立像素dp（这个新的单位能够保证图像内容在不同的ppi设备看上去大小差不多）

物理像素：值的是屏幕渲染图像的最小单位，属于屏幕的物理属性，不可人为进行改变，其值大小绝对了屏幕渲染图像的品质

适配方案

移动开发的核心就是屏幕适配

为什么要设置viewport？

为了让页面能正常的显示在不同的设备上

1.固定宽度

设置meta标签 name = "viewpost" content = 'width=device-width  initial-scale = 1

设置内容区域大小为320px

设置内容区域水平居中显示

此方案较少采用

2.百分比宽度

设置mata标签

设置页面宽度为百分比

width，height，padding，margin 参照父元素的宽度

border  不支持百分比设置

3.rem单位

设置meta标签

设置网页元素宽度单位为rem或者em（此方案比较灵活）

em相对长度单位，其参照当前元素字号大小，如果当前元素未设置字号则会继承其祖先元素字号的大小

rem相对长度单位，其参照根元素（html）字号大小

4.100%像素

设置网页宽度等于设备物理像素

设置初始化缩放比例

淘宝针对iPhone设备采用的这种方式

触屏事件

.1.touchstart 手指触摸屏幕的时候触发

2.touchmove 手指在屏幕上移动的时候触发，持续触发

3.touchend  手指离开屏幕的时候触发（使用changedTouches）

事件源参数

1.e.touches  位于屏幕上所有的手指列表

2.e.targetTouches  位于该元素上面的手指列表

3.e.changedTouches  记录从无到右，从有到无

clientX/Y  相对于当前视口移动端的屏幕

pageX/Y  相对于当前页面内容的，包含滚动出去的距离

screenX/Y 距离屏幕的距离

推荐使用  clientX/Y    targetTouches

touch事件实现元素的拖拽原理

获取当前触摸点的坐标

获取滑动点的坐标

获取两者的差值

把差值传给对象就是它的位移值了

注意点：拖拽一定是基于上次拖拽位置之上的，所以需要定义一个变量来存放上次拖拽位置

盒子边缘的边框可以用边框，也可以用伪类，也可以用盒子阴影来做

响应式布局

核心是：运用到媒体查询，实现不同屏幕下面的样式设置

兼具：移动端和pc端

优点：一个页面可以适配不同的终端

缺点：产生的代码体积过大 代码相对复杂，加载比较慢

屏幕大小

超小屏幕： w<768px

小屏幕： 768px<= w < 992px

中等屏幕 992px <= w < 1200px

大屏幕   w >= 1200px

书写规范：按照从小到大(参照最小宽度的时候)，或者从大到小的排列(参照最大宽度的时候)

重点重点：每个运算符之间都要有一个空格，要不然就不会起作用

内部式 外部式

二倍图

1.什么是二倍图？

原始图片尺寸的二倍

2.为什么要有二倍图？（原理图片放大失真，缩小不会）

图片在正常分辨率下能正常的显示，到高分辨率下就显示得比较模糊，为了解决这个问题，我们在高分辨率下就需要使用二倍图或者三倍图

3.二倍图的作用？

在不同分辨率情况下也能正常的显示高清的效果

less文件（网站地址：https://less.bootcss.com）

在保存的过程中可以将less文件保存为css文件

语法规范

1.注释

/* 注释内容*/ 通过这种方式写的注释在less文件和css文件中都可以看到

// 注释    通过这种方式写的注释在css文件当中看不到，只有在less文件当中可以看到

2.变量的命名

@变量名:变量值

3.混入（类似于函数的调用，还可以加参数）

4.嵌套式

语法规范