响应式网站设计：如何使您的网站响应式

设置媒体查询范围（响应式断点）

根据设计的独特需求设置媒体查询范围。例如，如果我们想在设计中遵循 Bootstrap 标准，我们可以使用以下媒体查询：

• 576px（针对手机）
• 768px（针对平板电脑）
• 992px（针对笔记本电脑）
• x（针对大型设备） 尺寸布局元素的数量随百分比变化或创建 CSS 网格布局

  第一步也是最重要的一步是根据媒体请求或屏幕断点为不同的布局元素设置不同的大小。

  布局容器的数量取决于设计，但大多数网站都关注以下元素：

  • 包装或容器
  • 标题
  • 内容
  • 侧边栏
  • 侧边栏 通用布局

    采用移动优先的方法，您可以像这样设置主要布局元素的样式（无需媒体查询来制作移动设备的基本样式）：#wrapper {width:95%;游戏空间：0辆车； }#header {宽度：100%; } # 内容{ 宽度: 100%; }#sidebar { 宽度：100%； } # 页脚 { 宽度：100%; }// 小型设备（landsc猿手机，576px 等）@media (min-width: 576px) { // 中型设备（平板电脑，768px 等）@media (min-width: 768px) { #wrapper { width: 90%；游戏空间：0辆车； } # 内容{ 宽度: 70%;游泳： 向左； }#sidebar {宽度：30%；游泳： 右； }// 大型设备（桌面，992px 及以上）@media (min-width: 992px) { ... }}// 超大型设备（大型桌面，1200px 及以上）@media (min-width: 1200px) { #wrapper { 宽度：90%;游戏空间：0辆车； }}

    在基于百分比的方法中，“浮动”属性控制元素出现在屏幕的哪一侧（左侧或右侧）。

    如果您想超越基础知识并创建最先进的响应式设计，您需要熟悉 CSS Flexbox 布局及其属性，例如框大小和 Flex。

    实现响应式图像

    如前所述，确保图像不被损坏的一种方法是仅对所有图像使用动态值。 img {Width: 100%;}

    但这不会减少移动访问者网站上的负载。

    向页面添加图像时，请确保您的 srcset 始终包含包含不同尺寸照片的内容。

    手动执行此操作可能非常耗时，但使用 WordPress 等 CMS，它会在您上传媒体文件时自动执行。

    网站文本的响应式排版

    响应式网页设计的主要焦点是布局块、元素和媒体的响应能力。文本常常被视为事后的想法。

    但对于真正的响应式设计，您还应该适当调整字体大小以适应屏幕尺寸。

    最简单的方法是为字体大小设置一个静态值，例如 22px，并在每个媒体请求中调整它。

    

    字体大小与视图大小分散

    您可以通过用逗号分隔每个元素来同时定位多个文本元素。 @media (min-width: 992px) { body, p, a, h4 { font-size: 14px;}}

    响应能力测试

    首先，如果网站是移动的，您想通过 Google 测试您的移动友好性- 友好。只需输入您网站的 URL，然后单击“测试 URL”按钮即可获取结果。

    

    Google 的移动友好测试

    如果需要一段时间才能获取您的网站，请不要担心。这并不反映您的页面加载速度。

    如果您按照本文中的步骤操作，您应该拥有一个适合移动设备的网站。

    然后您想使用 Chrome 开发者工具等工具在不同的屏幕尺寸上测试您的网站。

    在 Windows 计算机上按 CTRL + Shift + I 或在 Mac 上按 Command + Option + I 打开相关设备视图。从这里，您可以在您选择的移动设备或平板电脑上测试设计的响应能力。

    

    在 Chrome 中测试响应式和移动布局

    在完成此过程时，您将需要回答一些问题。

    • 布局是否调整为正确的列数？
    • 内容、布局元素和容器是否适合不同的屏幕？
    • 字体大小适合所有屏幕吗？