如何根据不同的屏幕尺寸更改网站大小？

Question

我目前正在更新我的网站，我希望所有内容都能自动更改大小以适应浏览器，移动设备和桌面设备，同时保持相同的比例。

这样做的最佳方式是什么？

我尝试了多种方法，但没有设法让任何工作，页面底部的图片和顶部的javascript导致了最大的问题。

我更喜欢使用html / css选项，但如果有更好的方式通过javascript，我就可以了。

以下是我用于测试的子域名的链接：

http://www.beta.trinity-international.com/

谢谢！

Answer 1

请使用使用CSS3媒体查询的RWD（响应式网页设计）方法。

媒体查询： 媒体查询是CSS3中引入的CSS技术。 仅当某个条件为真时，它才使用@media规则包含一个CSS属性块。

<强>语法 @media（min-width：700px）{...}

参考： https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

响应式框架：

有一些框架可用于创建RWD。

• Twitter Bootstrap http://getbootstrap.com/2.3.2/
• 基金会http://foundation.zurb.com/
• Skeleton http://getskeleton.com/

Answer 2

您可以将Bootstrap用于您的网站。它在所有平台上都能正常工作。

Answer 3

响应式网页设计需要注意的一些事项

<强>视口：

LIKE

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 视口元素为浏览器提供了有关如何控制页面尺寸和缩放的说明。

媒体查询：

媒体查询是CSS3中引入的CSS技术。

仅当某个条件为真时，才使用@media规则包含一个CSS属性块。

例如，如果您希望您的网站具有不同尺寸的不同屏幕：

<meta>

这不会改变尺寸，只会改变更大屏幕尺寸的余量。

有关响应式检查的更多说明请查看此链接w3schools