Udacity前端开发工程师（入门）15 - 响应式设计之从小处开始（始于微时）

定义窗口（Viewport）

本课程将学习如何优化网站，使之在任何设备上表现上佳，包括CSS和设备独立像素值（Device Independent Pixel）的不同以及如何为元素选择合适尺寸。

像素不等于像素

浏览器并不是根据物理硬件的像素宽度而工作，而是根据设备独立像素值（Device Independent Pixel）DIPs宽度。DIP是一种计量单位，将像素值与实际距离联系起来。DIP值表示的是屏幕上同样大小的空间，而非屏幕的像素密度。因此，如果屏幕物理硬件的实际像素值是浏览器报告像素的2X，Chromebook的像素比（Device Pixel Ratio）就是2。

因此，如果没有设定视图端口而在移动设备浏览器上浏览网页内容时，像素比很有可能<1（e.g. 原本网页是显示在宽980DIPs的屏幕上的，现在被压缩至一款宽度仅有360DIPs的手机屏幕上）。开启字体改善机制（font-boosting）可以改善渲染效果，将页面重点信息字体放大。但并不能妥善解决当前问题。

在两个分辨率相同的屏幕中，为什么同样的文字在两个屏幕上变现不同？

1. Device pixel ratio在不同的设备上有不同的值
2. Viewport 没有设置

设置窗口

为添加viewport标签可以让浏览器了解我们的意图，如下

width=device-width使页面内容可以匹配不同屏幕尺寸
initial-scale=1添加初始缩放比例并赋值1是告诉浏览器相对像素与CSS像素的比例是1:1

固定宽度元素 V.S 相对宽度元素

因为不同设备上的CSS像素设定如此多样，不能指望只用视窗宽度属性就能解决所有显示问题。过大的CSS宽度或者绝对定位会让元素不是太大就是不能适应屏幕大小。这就是为什么要选择相对定位（relative positions）而非绝对定位（absolute positions）

e.g. 将宽度设为100%

设计思路 - 从小处开始

从最小的屏幕开始做起，可以仔细权衡对于用户最重要的信息。

image.png