移动端布局：写一个自适应的正方形盒子

来源：动视网责编：小采时间：2020-11-27 15:38:18

移动端布局：写一个自适应的正方形盒子

移动端布局：写一个自适应的正方形盒子:移动端布局，div按比例布局，宽度为百分比，让高度和宽度一样，即让div为正方形最近在写一个小程序，遇到了一个布局问题:一个div宽度比例width:20%，比如是屏幕宽度的20%,想让高度和宽度一样，即让这个div是正方形，怎么实现呢？因为做的是移动端，屏幕宽度

推荐度：

点击下载本文 文档为doc格式

导读移动端布局：写一个自适应的正方形盒子:移动端布局，div按比例布局，宽度为百分比，让高度和宽度一样，即让div为正方形最近在写一个小程序，遇到了一个布局问题:一个div宽度比例width:20%，比如是屏幕宽度的20%,想让高度和宽度一样，即让这个div是正方形，怎么实现呢？因为做的是移动端，屏幕宽度

移动端布局，div按比例布局，宽度为百分比，让高度和宽度一样，即让div为正方形

最近在写一个小程序，遇到了一个布局问题:一个div宽度比例width:20%，比如是屏幕宽度的20%,想让高度和宽度一样，即让这个div是正方形，怎么实现呢？因为做的是移动端，屏幕宽度不定，又想让这个div盒子宽高一样，呈现为正方形。效果如下：

现在将查询到的方案汇总一下：

方案一：JavaScript/jQuery方法：


方案二：通过CSS中的padding-top或padding-bottom将盒子撑起来




 
 
 
 
 


方案三： 使用 vw/vh 单位，但是需要注意的是vw/vh单位是将当前视口的宽度/高度平均分成100份的长度，并非父级盒子，所有需要计算一下




 
 
 
 
 



总结： vw/vh 单位的出现无疑让现在适应各种宽度的屏幕又有了一个更好的解决方案，但是可能在某些机型上不支持，所有有的时候还是各取所需吧！

    

    
    
        移动端布局：写一个自适应的正方形盒子
        移动端布局：写一个自适应的正方形盒子:移动端布局，div按比例布局，宽度为百分比，让高度和宽度一样，即让div为正方形 最近在写一个小程序，遇到了一个布局问题:一个div宽度比例width:20%，比如是屏幕宽度的20%,想让高度和宽度一样，即让这个div是正方形，怎么实现呢？因为做的是移动端，屏幕宽度
        推荐度：
    
    
        
            点击下载本文
            文档为doc格式
        
    

              
        
                
            标签：
                        盒子
                        移动端
                        正方形
                    
                
            
             
                    
                        热门焦点

移动端布局：写一个自适应的正方形盒子

移动端布局：写一个自适应的正方形盒子

移动端布局，div按比例布局，宽度为百分比，让高度和宽度一样，即让div为正方形

移动端布局：写一个自适应的正方形盒子

最新推荐

猜你喜欢

热门推荐