移动端开发基础

本周学习内容：

1、移动端基础

2、二倍图和多倍图

3、移动端技术性内容

4、流式布局

一、移动端基础

视口（Viewport）：显示页面布局的屏幕区域

1、布局视口（lay viewport）:在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条。

2、视觉视口（visual viewport）：用户正在看到的网页的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。

3、理想视口（ideal viewport）：布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口（为了使网站在移动端有最理想的浏览器和阅读宽度而定；需手动填写mate视口标签通知浏览器操作）

mate视口标签

       <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

width:宽度设置的是viewport，可以设置device-width特殊值

initial-scale：初始缩放比，大于0的数字

maximum-scale：最大缩放比，大于 0的值

user-scalable：用户是否可以缩放，yes或no（1或0）

标准的viewport设置：

1、视口宽度与设备保持一致

2、视口默认值缩放比例1.0

3、不允许用户自行缩放

4、最大允许缩放比例1.0

5、最小允许缩放比例1.0

二、二倍图和多倍图

1、物理像素和物理像素比

• 物理像素点是指屏幕显示的最小颗粒，是物理真实存在的。
• 开发时1px不是一定等于一个物理像素
• PC端1px=1个物理像素，但移动端不一定
• 1个px的能显示的物理像素点的个数物理像素比或屏幕像素比。不同设备，物理像素比不同。
• 在iPhone8中，1开发像素=2物理像素。Retina(视网膜屏)是一种显示技术，把像素点压缩成块会有更高分辨率。

2、获得设备像素比后：

一倍图：当这个比率为1:1时，使用1个设备像素显示1个CSS像素。

二倍图：当这个比率为2:1时，使用4个设备像素显示1个CSS像素，

三倍图：当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。

3、background-size:背景图片宽     背景图片高；（指定背景图片的大小)

值可以写px/百分比/cover/contain

cover：会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。（图片部分可能不会显示在盒子里，但一定会占满盒子）

contain：会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。（图片可能不会占满盒子）

三、移动端技术性内容

1、移动端开发选择：单独移动端页面、响应式兼容PC移动端

2、移动端技术解决方案注意

• HTML5 、CSS3同样适用于移动端
• box-sizing：border-box;
• 特殊样式：高亮清除：-webkit-tap-hightlight-color:transparent;
• 在移动端浏览器默认的外观在iOS上加上此属性才能给按钮和输入框自定义样式：-webkit-appearance:nane;
• 长按页面时，禁止弹出菜单（img、a）-webkit-touch-callout:none；

3、移动端常见布局：

单独制作移动端页面时：

• 流式布局
• flex弹性布局
• less+rem+媒体查询布局
• 混合布局

1. 响应式页面制作：

• 媒体查询
• bootstrap

四、流式布局（百分比布局）

不受固定像素限制，内容向两侧填充，根据屏幕宽高进行伸缩

重要属性:

max-width(max-heigth)

min-width(min-heigth）

注：二倍精灵图：

1、在firework里把精灵图等比缩放为原来的一半

2、之后根据大小测坐标

3、注意代码background-size也要写精灵图原宽的一半