前端基础（14）：移动端布局（媒体查询及响应式 + rem）

学习目标

• 1、Responsive Web Design 响应式设计布局概念
• 2、媒体查询的概念及应用
• 3、meta标签的设置
• 4、dpi、ppi介绍
• 5、dpr （设备像素比）

一、 Responsive Web Design 响应式设计布局概念

响应式设计（Responsive web design，通常缩写为 RWD）是一种网页设计的技术做法，该设计可使网站在多种设备上阅读和导航，同时减少缩放、平移和滚动。

1、Responsive设计特点

* 该网站必须建立灵活的网格基础

* 引用到网站的图片必须是可伸缩的

* 不同的显示风格，需要在media queries上写不同的样式

2.Responsive中的术语

在响应式设计中， 有一些其专有的术语， 而且理解这些术语对于帮助理解和学习响应式设计至关重要。

a. 流体网格

b. 弹性图片 img{width:100%}

c. 媒体查询

d. 屏幕分辨率

e. 主要断点

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

screen 或者all 是媒体类型里的一种，CSS2.1定义了10种媒体类型and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备) (min-width: 320px) 就是媒体特性，其被放置在一对圆括号中。

在这里插入图片描述

3.meta标签：

当Responsive设计页面在智能设备中进行测试的时候（比如说iPhone或Android），会发现，所有的媒体查询都不会生效—页面仍展示为普通的样式， 即一个全局缩小后的页面。这是因为许多智能手机都使用了一个比实际屏幕尺寸大很多的虚拟可视区域 viewport， 主要目的就是让页面在智能手机端阅读时不会因为实际可视区域而变形。为了让智能手机能根据媒体查询匹配对应样式，让页面在 智能手机中正常显示， 特意添加了一个特殊的meta标签。这个标签的主要作用就是让智能手机浏览网页时能进行优化，并且可以自定义界面可视区域的尺寸和缩放级别。

< meta name=" viewport" content="" />

在实际项目中，可以通过这个可视区域的meta标签进行重置， 告诉它使用设备的 宽度为视图的宽度， 也就是说， 禁止其默认的自适应页面的效果， 具体设置如下：

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

width = device-width：宽度等于当前设备的宽度

initial-scale： 初始的缩放比例（默认设置为1.0）

minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

忽略将页面中的数字识别为电话号码<meta name=“format-detection” content=“telephone=no” />

忽略Android平台中对邮箱地址的识别 <meta name=“format-detection” content=“email=no” />

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

<meta name=“apple-mobile-web-app-capable” content=“yes” />

<!-- ios7.0版本以后，safari上已看不到效果 -->

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

<meta name=“apple-mobile-web-app-status-bar-style” content=“black” />

<!-- 可选default、black、black-translucent -->

4. viewport

（viewp ort 手机浏览器是把页面放在一个虚拟的"窗口" ）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的其他部分。

1、屏幕尺寸：指的是屏幕对角线的长度

2、分辨率：是指宽度上和高度上最多能显示的物理像素点个数

3、点距：像素与像素之间的距离，点距和屏幕尺寸决定了分辨率大小

4.dpi、ppi介绍

DPI（dots per inch） 每英寸有多少点, 印刷行业术语。

PPI（pixels per inch） PPI 即像素密度，表示每英寸所拥有的像素数量。 即每英寸(1英寸=2.54厘米)聚集的像素点个数，

针对在电脑屏幕或手机屏幕上面来说DPI=PPI

比如说4.7英寸iphone 6的PPI是326。

5、css像素(也叫虚拟像素)：指的是 CSS 样式代码中使用的逻辑像素，在 CSS 规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px 是一个相对单位，相对的是设备像素(device pixel)

6.dpr （设备像素比）

设备像素比DPR(devicePixelRatio)

设备像素比 = 物理像素 / 逻辑像素(px)

(1)设备像素/物理像素(physical pixel)

指设备能控制显示的最小物理单位，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关，单位 pt。

如：iPhone6上就有750*1334个物理像素颗粒。

(2)设备独立像素/逻辑像素(density-independent pixel)

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，有时我们也说成是逻辑像素。这个点是没有固定大小的，越小越清晰，然后由相关系统转换为物理像素。

(3)设备像素比(device pixel ratio )简称dpr

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系。

设备像素比 = 设备像素（物理像素） / 设备独立像素（逻辑像素）。(在Retina屏的iphone上，DPR为2，1个css像素相当于2个物理像素)

如：iPhone6的dpr为2，物理像素750（x轴）,则它的逻辑像素为375。

也就是说，1个逻辑像素，在x轴和y轴方向，需要2个物理像素来显示，如下图：

iPhone4 物理像素640 逻辑像素为320 dpr=2

iPhone3GS 物理像素320 逻辑像素为320 dpr=1

问题：为什么以iPhone6为标准的设计稿的尺寸是以750px宽度来设计的呢？

iPhone6的满屏宽度是375px，而iPhone6采用的视网膜屏的物理像素是满屏宽度的2倍，并且设计师所用的PS设计软件分辨率和像素关系是1:1。所以为了做出的清晰的页面，设计师一般给出750px的设计图，我们再根据需求对元素的尺寸设计和压缩。

7、 rem原理

1.em 是相对于其父元素字体大小的单位

2.rem是什么?

rem(font size of the root element)是指相对于根元素的字体大小的单位。

3.为什么web app要使用rem？

实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem 能等比例适配所有屏幕,根据变化html的字体大小来控制rem的大小,

需要转换的像素值 ÷ 父元素的font-size = em值

需要转换的像素值 ÷ 根元素的 font-size = r em 值