基本响应式设计概念

响应式设计的艺术

设置视窗

当我们制作网页的时候，可能内容会溢出界面，或者我们需要放大页面才能看清内容，这就和我们设置视窗（浏览器能够显示内容的区域）有关。如果没有定义视图端口，浏览器会自己决定视图尺寸，这会导致网页发生一些变化。

在 标签中添加 标签，可以让浏览器知道我们的意图，避免左右滚动。如下内容：

<meta name="viewport" content="width=device-width,initial-scale=1">

在视窗值（viewport）后面设置页面宽度(device-width)，来指导页面对具体设备进行宽度调整，使页面内容可以匹配不同屏幕尺寸。添加初始化缩放比例属性（initial-scale）并赋值1，告诉浏览器相对像素与 CSS 像素的比例是1:1。如果不把初始缩放比例设为1的话，有的浏览器会在切换到横屏模式时，依旧保持之前的页面宽度，而且它们还会使内容只是进行缩放，而无法自动调整布局。

设置元素相对宽度

在定义元素宽度时，应采用相对宽度，来防止元素溢出窗口。不同设备上的 CSS 像素取值多种多样，我们不能指望只用视窗宽度属性就能解决所有显示的问题，过大的 CSS 宽度或绝对定位会让元素要么太大，要么完全不能适应屏幕的大小，这也是为什么用相对定位（比如宽度设为 100%），而非绝对定位。

事实上，推荐添加一个多类选择器，将需要设置的元素的属性一次性都设置好。

当然，我们也可以将元素的宽度设置的很小，小于所有硬件设备的宽度，这样它也符合响应式的要求。

设置元素最小尺寸

当我们在对网页进行响应式处理的时候，元素之间的距离可能会变小，如果是可点击的元素则会导致我们的手指可能点击的不对，造成麻烦。为了防止用户同时点击多个按钮，我们可以把按钮的尺寸设为 48*48px，确保元素之间有足够的距离。

只用宽度和高度属性会使得元素不能自动调整，就有可能导致内容溢出容器。

像素

不是所有的像素点都是一样大小的，经常一个像素并不显示等于一个像素。浏览器并不是根据物理硬件的像素宽度而工作的，而是根据设备独立像素 （device independent pixels-DIPs） 值。DIP 是一种计量单位，它将像素值与实际距离联系起来。同一 DIP 值表示的是屏幕上同样大小的空间，而不论显示器的像素密度是多少。

像素比（DPR）就是物理硬件的实际像素值/浏览器报告像素（css 设置的像素）。所以说，如果物理硬件的实际像素值是浏览器报告像素的两倍的话，那么硬件的像素比是2，所以这个浏览器的宽度是 800dips 在实际显示的时候其实是被硬件扩展到了 1600 的硬件像素宽度。

一个手机屏幕技术规格显示其分辨率是 1920 * 1080 px，这里的像素是指硬件像素。

设计规则

设计响应式网页的概念和过程和非响应式一样，除了不只是画一种宽度的设计稿，而是要多画几种来适应不同屏幕尺寸。从最小的屏幕开始做起，通常是手机设备。在这个过程中仔细权衡对用户最重要信息，明确内容的优先级，最重要的内容永远都会留在页面上，让用户得到最完整的体验。

在装有 Chrome 的 Android 上远程调试

文章只是作为个人记录学习使用，如有不妥之处请指正，谢谢。