响应式网页设计最佳实践

Posted 2021-04-30 狮子开口学UI

响应式是您网页设计的最佳解决方案，并且对任何用户而言都将完美无瑕。

秘密在于利用具有不同屏幕尺寸的各种设备进入Web的现代趋势。很久以前，您只能在坐在PC显示器前面的家中享受互联网的时代。现在，每个人都可以将万维网放在一个小口袋里，几乎可以随心所欲地使用它。

因此，如果网络应用程序的设计与笔记本电脑配合良好，但无法成功适应智能手机屏幕，软件开发人员可能会受到批评。为了避免这种麻烦，软件工程师应该不遗余力地、尽可能地适配网页。

什么可以促进创建响应式网页的过程？

实际上，要记住网页设计的响应有很多因素需要注意。但幸运的是，有一些方法可以缓解和加快这一过程。UI库和框架为开发人员提供了许多现成的UI元素，可帮助创建出色的响应式Web应用程序。这样的固定解决方案可以避免应用程序和网站创建者的错误数量并加速项目。您所需要的只是选择javascript UI框架完全适合您的任务。同样重要的是要注意您的框架应该根据材料设计指南构建。

使网页设计响应的关键建议：

· 设置视口

<meta name =“viewport”content =“width = device-width，initial-scale = 1.0”>

将视口元标记应用于您的Web应用程序，以使其在各种屏幕上看起来很好。这将启用页面及其内容的缩放。

<meta name =“viewport”content =“width = device-width”>

宽度=设备宽度以适应页面宽度的装置的屏幕宽度。简而言之，由于此标记，浏览器知道您需要一个适合手机屏幕宽度的视口。你可以手动设置最大宽度，比如320 px，如下所示：

含量=”宽度= 320像素”

该初始规模= 1.0当用户加载首次页面部分设置初始缩放级别。一个视口像素等于一个CSS像素。用户可扩展，最大规模和最小规模属性控制用户如何缩放或缩小页面。注意“1.0”不要缩放。如果变量设置为“2.0”，则用户将能够将页面放大2倍，等等。

· 缩放内容以适合视口

无响应的网站和网络应用的主要问题是用户必须在智能手机上水平滚动内容，其屏幕尺寸需要垂直滚动。放大和缩小也远非方便。即使你设法创建一个响应充分的网页，它仍然可能很难摆脱水平滚动。这是什么原因？

这通常是因为使用具有固定宽度的大量元素。这个问题的根源在于各种设备。如今，有许多智能手机和平板电脑具有不同的屏幕宽度。当您修复最小尺寸时，您可能会出错，因为在这种情况下，图像可能会比智能手机宽度更大。用户仍然需要滚动，或者更糟糕的是，将无法看到整个图像。  

设置最大图像宽度的情况相同。如果将CSS width属性设置为100％，则图像会响应并可以向上和向下缩放。但它可能会导致问题：图像或文本可以放大到比原始大小更大。当然，它看起来不会很漂亮。

理想的解决方案是使用图像的max-width属性。如果属性设置为100％，则图像将缩小（如果必须），但从不缩放到大于其原始大小：

img src =“img_girl.jpg”style =“max-width：100％; 身高：汽车;”

· 使用媒体查询

借助媒体查询帮助，您可以应用适合几乎任何设备的CSS样式。媒体查询是CSS3中引入的CSS技术。它允许更改CSS样式，其选择取决于设备的特性，例如屏幕分辨率，高度和宽度。仅当特定设备的某个条件为真时，媒体查询才使用@media规则来包含CSS属性块。

@media（查询）{ 
 / *查询匹配时使用的CSS规则* / 
}

还建议使用min-width而不是min-device-width。一些开发人员认为这些术语的含义相同。这是一个常见的错误，因为最小宽度主要与视口相关，视口比最小设备宽度窄。缺乏理解会导致不愉快的后果。内容可能会出现在视口之外。没有用户会喜欢这个。

您可能已经注意到使用相对值可以避免意外错误。例如，将宽度固定为320px并不是一个好主意。但是，如果你像下面的例子中那样100％，你就不会错。页面将无法比设备的屏幕更宽或更窄。

div.fullWidth { 
 width：100％; 
}

· 选择最合适的断点

当您必须更改网页上的列数（主侧边栏主侧边栏，辅助侧边栏）以使其响应时，通常需要断点。例如，当侧边栏放在主要内容下方时，典型的断点就会发生，以使较小的设备上的一切看起来都很好。

一些开发人员更喜欢依靠最流行的分辨率来设置断点。这是一个合理的选择。但是应该记住，要遵循的最佳策略是“移动优先”方法。这意味着开发应该始终从创建智能手机的版本开始，更重要的是，最小的一个。它有助于在网页上找到最重要的信息。然后，更容易为更大的屏幕提出断点。

较小屏幕的示例：

/ *智能手机（纵向和横向）---- * / 
@media only屏幕和（min-device-width：320px）和（max-device-width：480px）{ 
/ *样式* / 
}

更大屏幕的示例：

@media only屏幕和（min-device-width：360px）和（max-device-height：640px）和（orientation：portrait）和（-webkit-device-pixel-ratio：3）{ 
/ *样式* / 
}

结论

创建可以完美适应任何类型屏幕的数字解决方案是一项艰巨的任务。Web开发人员应该知道一系列技巧，以使网页响应。他们可以遵循本文中的建议，也可以避免很多麻烦，转而使用UI库中的现成元素。