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

2023-04-0418:51:54网页制作Comments1,134 views字数 1631阅读模式

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

根据您设计的独特需求设置您的媒体查询范围。例如，如果我们想在设计中遵循Bootstrap标准，我们将使用以下媒体查询：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

纵向手机为576px
768px平板电脑
992px 用于笔记本电脑
大型设备为1200像素

使用百分比调整布局元素或创建CSS网格布局

第一步也是最重要的一步是根据媒体查询或屏幕断点为不同的布局元素设置不同的大小。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

您拥有的布局容器的数量将取决于设计，但大多数网站都关注下面列出的元素：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

包装器或容器
标题
内容
侧边栏
页脚

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

通用布局文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

使用移动优先的方法，您可以像这样设置主要布局元素的样式（无需对手机的基本样式进行媒体查询）：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

#wrapper {width:95%; margin: 0 auto; }

#header {width:100%; }

#content {width:100%; }

#sidebar {width:100%; }

#footer {width:100%; }

// Small devices (landscape phones, 576px and up)

@media (min-width: 576px) {

// Medium devices (tablets, 768px and up)

@media (min-width: 768px) {

#wrapper {width:90%; margin: 0 auto; }

#content {width:70%; float:left; }

#sidebar {width:30%; float:right; }

// Large devices (desktops, 992px and up)

@media (min-width: 992px) { ... }

}

// Extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) {

#wrapper {width:90%; margin: 0 auto; }

}

在基于百分比的方法中，“float”属性控制元素将出现在屏幕的哪一侧、左侧或右侧。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

如果您想超越基础并创建尖端的响应式设计，您需要熟悉CSS flexbox布局及其属性，如box-sizing和flex。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

实施响应式图像

如前所述，确保图像不会损坏的一种方法是仅对所有图片使用动态值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

img {

width: 100%;

}

但这不会减少移动访问者访问您网站时的负载。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

当您将图像添加到页面时，请确保srcset始终包含具有不同尺寸照片的内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

手动执行此操作可能非常耗时，但使用WordPress等CMS时，它会在您上传媒体文件时自动发生。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

网站文本的响应式排版

响应式网页设计的主要焦点是布局块、元素和媒体的响应性。文本通常被视为事后的想法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

但是对于真正的响应式设计，您还应该适当地调整字体大小以匹配屏幕大小。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

最简单的方法是为font-size设置一个静态值，比如22px，并在每个媒体查询中调整它。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

字体大小与视图大小散点文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

您可以同时定位多个文本元素，方法是使用逗号分隔每个元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

@media (min-width: 992px) {

body, p, a, h4 {

font-size: 14px;

}

测试响应能力

首先，您想通过Google的移动设备友好测试来测试您的网站是否适合移动设备。只需输入您网站的URL，然后单击“Test URL”按钮即可获得结果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

谷歌的移动友好测试文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

如果获取您的网站需要一段时间，请不要担心。这并不能反映您的页面加载速度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

如果您按照本文中概述的步骤操作，则应该说您拥有一个适合移动设备的网站。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

然后，您想使用Chrome开发人员工具等工具在多种屏幕尺寸上测试您的网站。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

在Windows计算机上按 CTRL + Shift + I 或在 Mac 上按 Command + Option + I 打开相关设备视图。从这里，您可以选择您选择的移动设备或平板电脑来测试您的设计的响应能力。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32909.html