Question

我认为我有一个网站我的大多数用户在我的网站上使用台式机或笔记本电脑。问题是，在某些屏幕上，只有1/4的屏幕开始使用，休息只是背景。如何使其自动缩放，以使其符合屏幕尺寸？

Answer 1

您需要使用CSS“响应式设计”。你可以在这里找到一些例子：

http://www.creativebloq.com/responsive-web-design/build-basic-responsive-site-css-1132756

基本上，您使用 min-width / max-width 和 @media 来决定要显示的内容以及方式。

如果你不喜欢做那种事情，那么 Bootstrap 是一个很好的方法，只需付出最少的努力就可以实现这一目标：

http://getbootstrap.com/

Answer 2

您可以使用 css3转换：

-webkit-transform: scale(0.5);  /* Chrome, Safari 3.1+  */
-moz-transform: scale(0.5);  /* Firefox 3.5-15 */
-ms-transform: scale(0.5);   /* IE 9 */
-o-transform: scale(0.5);    /* Opera 10.50-12.00 */
transform: scale(0.5);

计算比例比率并在脚本中应用具有此比率的规则。

不要忘记将变换后的元素的left和top属性设置为全宽和高度的偏移比率：

offsetRatio = (ratio - 1) / 2;

Answer 3

.wrapper { 最大宽度：1000像素; 保证金：0自动; }

wrapper - 是您网站的主要容器

自动缩放页面，使其适合屏幕

3 个答案: