为什么常用二倍图，流式布局中一倍图是否靠得住

常用布局第一篇——流式布局

回顾

上一篇中我们结束了 css3 中的内容，回顾 css3 我们深入的学习了 css 中的东西，在 css 的基础上 c3 又有了非常好的创新，这些都在日常的工作中特别的常用，所以需要好好温故而知新。h5c3 的基础学完之后，就开始布局了，今天是布局的第一篇。先来看看流式布局。

视口

视口（viewport） 就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口

• 布局视口

1. 一般移动设备的浏览器默认设置了一个布局视口，用于解决早期 pc 端页面在手机上显示的问题

2. IOS、Android 基本都将这个视口分辨率从设置为 980px，所以 pc 上的网页大多能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页

• 视觉视口

1. 字面意思，它是用户正在看到网站区域，注意：是网站的区域

2. 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度

• meta 视口标签

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

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

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

• maximum-scale：最大缩放比，大于 0 的数字

• minimum-scale：最小缩放比，大于 0 的数字

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

-二倍图

物理像素 &物理像素比

• 物理像素指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时设置好的，比如苹果 6/7/8 是 750*1334 不过需要注意的是在开发的时候需要注意：

• 我们开发的时候 1px 不一定等于 1 个物理像素

• pc 端页面，1px 等于 1 物理像素的，但是移动端不尽相同

• 一个 px 能显示的物理像素的个数，称为物理像素比或屏幕像素比

• pc 端 和 早期的手机屏幕 / 普通手机屏幕：1csspx = 1 物理像素的

• Retina（视网膜屏幕）是一种显示技术，可以将更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度

• 对于一张 50px X 50px 的图片，在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会总成图片模糊

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

• 通常使用二倍图，因为 iphone 6/7/8 的影响，但是现在还存在 3 倍图和 4 倍图的情况，这个要看实际开发公司的要求

• 背景图片，缩放问题

背景缩放：background-size

• background-size：属性规定背景图片的尺寸

• background-size：背景图片宽度 背景图片高度

• background-size

• 单位：长度 | 百分比 | cover | contain

• cover 把背景图片扩展至足够大，以使背景图像完全覆盖背景区域

• contain 把图像扩展至最大尺寸，以使宽度和高度完全适应内容区域

移动端布局基础概览

在移动端中物理像素比是固定的，如果想要在移动端和 web 端达到相同的展示清晰度，解决方法——二倍图的形式（在原图比例上进行二倍扩大，然后再代码中固定图片的宽和高，达到再移动端中也是相同的比例），所以在页面中需要将图片生成二倍图上传，然后形成一倍的比例。在移动端会很清晰

移动端技术解决方案

• css3 盒子模型 —— box-sizing：border-box （表示的是 css3 的盒子模型，border、padding 不会撑大盒子的宽高）

• 传统盒子模型 —— box-sizing：content-box （表示传统盒子模型，盒子中包含 border、padding 的距离）

特殊样式

• 在移动端中，css3 的特殊样式是需要去掉的，例如：在移动端中 a 标签是高亮显示的（背景有一个蓝色）以下是常用的去掉移动端中样式

• -webkit-tap-hightlight-color：transparent —— 去掉移动端 a 标签的背景蓝色

• -webkit-appearance：none —— 在移动端中去掉按钮和输入框自定义默认样式

• -webkit-touch-callout：none —— 禁用长按页面时弹出菜单

• vertical-align：middle —— 图片和文字居中对齐

结束

流式布局基本上就说完了，对于流式布局来说其余的仅作了解，但是二倍图这个概念或者方法在未来的工作中时特别常用的。所以需要在编辑器中可以试一试，然后再手机中对比一倍图和二倍图是否清晰。除此之外，还额外学了，css3 中的 box-sizing 和 background-size 也需要好好复习