提问人：Micheal Osei kwaku 提问时间：11/5/2023 最后编辑：James ZMicheal Osei kwaku 更新时间：11/8/2023 访问量：23
有没有办法让您的网站在所有屏幕尺寸上看起来都一样......我的网站在移动设备上看起来很糟糕，但在桌面设备上却不同
is there a way to make your website look the same on all screen sizes..... my site looks horrible on mobile but different on desktop
问：
我为一个网站设计了一个UI，以及团队何时这样做。桌面版本看起来还可以，但是当他们在不同的屏幕（移动）上打开网站时，它完全混乱了。排列错误的文本不适合它们应该的位置。
我使用 Figma 作为我的设计工具。有没有办法在 figma 中或通过编码来纠正它，使网站在所有屏幕上看起来都一样？
我只为桌面屏幕设计了 UI，认为它可以适用于所有屏幕
我不知道如何将桌面设计转换回移动设备。我是初学者
答：
-1赞
Sobia Yaseen
11/8/2023
#1
网站通常要求桌面和移动屏幕采用不同的设计，因为这两个平台之间的屏幕尺寸和用户交互差异很大。针对移动响应能力进行设计对于确保您的网站在各种设备上的外观和功能良好至关重要。
您可以采取以下措施来解决此问题并使您的设计适合移动设备：
1- Figma 中的响应式设计：
使用桌面设计打开您的 Figma 项目。 创建一个新框架或复制现有框架来表示移动屏幕（手机的常见尺寸为 320px 或 375px 宽度）。 调整布局、文本大小和元素以适应较小的屏幕。您可能需要垂直堆叠元素、减小文本大小并简化移动设备设计。 Figma 具有对元素设置约束的功能，以使其适应不同的屏幕尺寸。使用这些参数可确保元素在从桌面视图切换到移动视图时正确调整大小和位置。
CSS 中的媒体查询：
当您或您的开发团队对网站进行编码时，请使用 CSS 媒体查询为不同的屏幕尺寸应用不同的样式。这是使网站具有响应性的标准方法。 例如，您可以定义特定于特定宽度的屏幕的样式，并相应地调整布局。下面是 CSS 中的媒体查询示例：
@media（最大宽度：1399.9px） {
/* 最大宽度为 991.9px 的屏幕的 CSS 样式（通常用于桌面） */
} @media（最大宽度：1199.9px） {
/* 最大宽度为 1199.9px 的屏幕的 CSS 样式（通常用于桌面） */
} @media（最大宽度：991.9px） {
/* 最大宽度为 991.9px 的屏幕的 CSS 样式（通常用于平板电脑） */
} @media（最大宽度：767.9px） {
/* 最大宽度为 767.9px 的屏幕的 CSS 样式（通常用于平板电脑和较小的桌面） */
} @media（最大宽度：575.9px） {
/* 最大宽度为 767.9px 的屏幕的 CSS 样式（通常用于较小的桌面） */
}
您可以使用上述媒体查询根据所有设备调整设计布局。
评论