PC页面等比例缩放布局

Question

pc页面宽高都要随着屏幕的大小改变

给的是1366的设计图

Answer 1

自适应？还是包括字的大小之类都变化，如果是后者，太麻烦了。

Answer 2

你这情况，建议用rem代替px。然后用媒体查询，去控制font-size值的大小

Answer 3

给的是1366那就是最小宽度满足1366屏幕，大于的，就百分比自适应。具体内容具体设置宽度

Answer 4

给你说一个怎么让元素变成正方形的方法：

首先最外层的元素width铺满，height自适应；第二层元素的盒模型变成border-box，宽高不需要设置，设置padding(关键，百分比的padding是根基父元素的宽来计算)，如果你一行有n个元素，则设置padding为50%/n；第三层元素根据第二层元素绝对定位，设置top、left、bottom、rught。

这样第三层元素就是正方体内可操作的空间。矩形同理

然后你使用百分比，就变成自适应了

Answer 5

弹性布局？用rem

Answer 6

也可以考虑vw和vh这两个单位的使用。配合min-width,max-width使用。或者Grid Layout。各种设备上通常高度上都没有什么限制，设计上的限制主要是宽度上。像Bootstrap那种自适应都是基于媒体查询的。如果不同宽度下的展示差异比较大就需要借助媒体查询了。