【CSS】8-移动端开发

目标

能够知道移动端web开发现状

能够写出标准的viewport

能够使用移动web调试方法

能够说出移动端场景的布局方案

能够描述流式布局

能够独立完成京东移动端首页

基础

移动端基础、视口、二倍图、移动端调试、移动端技术解决方案、移动端常见布局、移动端开发之流式布局

一、移动端基础

1.现状

①浏览器现状

• 国内的 UC 和 QQ，百度等手机浏览器都是根据 Webkit 修改过来的内核，国内尚无自主研发的内核。总结：兼容移动端主流浏览器，处理 Webkit 内核浏览器即可。

②手机屏幕现状

• 移动端设备屏幕尺寸非常多，碎片化严重。
• Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏。
• 近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。
• 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px 。

③移动端屏幕尺寸

④移动端调试方法

chrome DevTools（谷歌浏览器）的模拟手机调试

搭建本地web服务器，手机和服务器在同一个局域网内，通过手机访问服务器

使用外网服务器，直接IP或域名访问

2.视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口
我们只需要关注理想视口

2.1布局视口layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

2.2、视觉视口 visual viewport

• 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
• 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

 

2.3、理想视口 ideal viewport

• 为了使网站在移动端有最理想的浏览和阅读宽度而设定
• 理想视口，对设备来讲，是最理想的视口尺寸
• 需要手动添写meta视口标签通知浏览器操作
• meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

 2.4总结

• 视口就是浏览器显示页面内容的屏幕区域
• 视口分为布局视口、视觉视口和理想视口
• 我们移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽
• 想要理想视口，我们需要给我们的移动端页面添加 meta视口标签

2.5、meta视口标签

2.6、标准的viewport设置

• 视口宽度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0

3.二倍图

3.1物理像素和物理像素比

• 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8 是 750* 1334
• 我们开发时候的1px 不是一定等于1个物理像素的
• PC端页面，1个px 等于1个物理像素的，但是移动端就不尽相同
• 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

 1.物理像素就是我们说的分辨率 iPhone8的物理像素是750

2.在iPhone8里面 1px开发像素=2个物理像素

PC端 和 早前的手机屏幕 / 普通手机屏幕: 1CSS像素 = 1 物理像素的

Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。由于 Retina 的出现，对于一张 50px * 50px 的图片,在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。

例如：我们需要一个 50*50 像素(css像素)的图片，直接放到我们的手机里面会放大2倍变成 100 * 100，这样就会模糊。

解决办法：我们直接放一个 100 * 100 图片，然后手动的把这个图片缩小为 50 * 50。这样将图放到手机里面，手机自动放大2倍变成 100 * 100，这样就不会造成图片模糊

我们准备的图片，比我们实际需要的大小大2倍，这种方式就是二倍图

3.2多倍图

在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设置中的模糊问题

通常使用二倍图，因为iPhone678的影响，但是现在还存在3倍图4倍图的情况，这个看实际开发需求

图片背景注意缩放问题

3.3背景缩放 background-size

我们的图片需要进行放大处理，那么我们的背景图片也是需要进行缩放处理。

background-size: 背景图片宽度 背景图片高度;

• 单位： 长度|百分比|cover|contain
• cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。等比例拉伸，要完全覆盖div盒子 可能有部分背景图片显示不全
• contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。高度和宽度等比例拉伸 当宽度或者高度铺满div盒子就不再进行拉伸了 可能会有部分空白区域

如果只写一个参数，肯定是宽度，高度省略了 会等比例缩放