如何构建响应式网站

如今，让您的网站具有响应能力是必须的，全世界近 53% 的人使用手机访问互联网，而且这个数字每天都在增长。

无论使用什么设备，无论是小屏幕还是大屏幕，你都希望自己的网站能够方便访问。在本文中，我将分享我打造响应式网站的方法。

1. 移动优先设计

移动优先意味着在设计桌面设备之前，先为移动设备设计。这也能提高页面在小屏幕上的加载速度。

当你开始一个新项目时，请确保始终首先为移动屏幕进行设计，为此，我通常将浏览器尺寸设置为 320px 宽（iPhone 5/SE 的屏幕尺寸）。

就我个人而言，我发现扩展我的设计以适应更大的屏幕比尝试压缩设计以适应更小的屏幕要容易得多。

2. 设置视口

视口是浏览器可以呈现内容的屏幕区域，为了使网站具有响应能力，必须正确设置视口，为此我们使用元标记。

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

• width=device-width 告诉浏览器匹配 dip（设备独立像素可以确定元素在用户设备上显示的大小，而不管用户的屏幕分辨率如何。），因此页面可以重新流动以允许内容调整大小以匹配浏览器的宽度

• 初始比例 1 将 dip 与 CSS 像素比率设置为 1，CSS 像素是我们大多数时间使用的像素，如果不将初始比例设置为 1，则当您将手机或平板电脑旋转到横向模式时，某些浏览器的宽度将保持不变。

3. 使用相对单位

为了避免固定图像，请使用相对单位（如%）而不是 px。

img, embed, object, video {
max-width: 100%;
}

// I always put this in my CSS file just to be safe

4. 点击目标应该足够宽

点击目标（按钮、输入框以及用户会触摸、点按或点击的任何内容）的宽度和高度必须至少为 40px。建议高度和宽度均为 48px。

对于大屏幕来说，这不算什么问题，因为鼠标的点击精度通常很高。但在移动设备上，如果点击目标太小，导致无法准确点击按钮/输入字段，那么问题就大了。导航链接也可能出现同样的问题，因此请务必进行相应的调整。

button, input {
min-width: 48px;
min-height: 48px;
}

// Again, I always put this in my CSS file just to be safe

6. 使用弹性盒子

弹性盒布局 (Flexbox) 让各种屏幕的设计变得更容易。它是一种布局模型，允许容器内的响应式元素根据屏幕尺寸自动排列。

相信我，使用 flexbox 将使您的生活更轻松。

5.使用媒体查询

媒体查询用于重新排列你的设计以适应不同的屏幕。最常用的是 max-width 和 min-width。

max-width 视口宽度小于指定值，而 min-width 视口宽度大于指定值。

当我完成 320px 屏幕的工作后，我使用媒体查询根据屏幕断点应用样式。

@media screen and (max-width: 500px) {
changes will apply when the viewport width 
is less than 500px;
}


@media screen and (min-width: 500px){
changes will apply when the viewport width 
is greater than 500px; 
}
// If you started mobile-first, I recommend using min-width

6.确定断点

我所说的断点是指你将使用媒体查询来相应地更改布局的宽度。断点有两种类型：

• 主要断点是布局发生重大变化
• 小断点用于进行小的更改，例如设置边距、填充或字体大小

设置断点时，请参考内容。在采用移动优先方法进行编码后，请调整浏览器，看看内容在哪里需要设置断点。这种方法比遵循开发工具默认提供的设备尺寸要好得多，因为不同品牌的设备尺寸会有所不同，而且差异很大。

就是这样，我希望这篇文章能够有所帮助，如果您有任何建议，请务必在评论中留下。