Question

用css3写一个移动端的正方形，在各种高分辨率的手机下都一样美观，求大神帮帮我

主要是高度应该如何能够很好的把控，让它在pad上也可以是正方形

Answer 1

首先，最简单的办法是把宽和高设为相同的固定值。但是如果是采用自适应布局的，比如正方形的宽是屏幕宽度的50%，则要这样：

<div style="width:50%; height:50vw; background-color:#f00"></div>

唯一要注意的就是可能存在浏览器兼容问题，不过我在手机微信内置浏览器以及电脑的Chrome上测试都没问题

追问

vw这个单位，在pad上就会显得特别的大，这个问题能解决吗

追答

在Pad上要注意一个问题，就是显示屏横向和竖向时要分别处理，横向时以高度（height）为标准，竖向时则要以宽度（width）为标准（比如我上面的代码就是）。

横向的代码则是：

<div style="height:50%; width:50vh; background-color:#f00"></div>

然后在CSS中要根据屏幕参数自动选择横向或竖向的样式代码，这个应该会吧？

或者用js也可以

干脆给你一个完整的例子吧：

<style>
html,body {width:100%; height:100%}
.zfx {background-color:#f00}
@media all and (orientation :landscape) {
   .zfx {height:50%; width:50vh}
}
@media all and (orientation :portrait) {
   .zfx {width:50%; height:50vw}
}
</style>
<div class=zfx></div>

Answer 2

宽和高设置同样的值就可以了呗？

追问

如果做成移动端的话，宽是百分比，那么高跟宽一样值的话，那就出不来效果了

追答

哦哦。。
正方形有什么用么？？

如果纯粹展示的，可以用border模拟一个

追问

正方形是大盒子的背景，border模拟，也要有一个相对的高度

追答

推荐看这个试试能不能达到你的要求

www。tuicool。com/articles/UbIzuau