如何让一个元素高度随宽度按比例自适应

Posted 2023-03-21

参考技术A 宽度的自适应是根据viewport的width来调整的，比如width：50%就是浏览器可视区域的50%，resize之后也会自动调整。

而height指定百分比后，他会自行找到viewport的height来调整，跟width一毛钱关系没有，自然两者不能达到比例关系了。通过这个思路，要找到一个能跟viewport的width扯上裙带关系的属性，就能解决这个问题了。

这个属性就是padding，padding是根据viewport的width来调整的，巧就巧在padding-top和padding-bottom也是根据viewport的width来计算的，那么通过设置这个属性就能跟width达成某种比例关系了

.fatherwidth:100px;height:100px;background:#222

.elementwidth:50%;background:#eee;

这个时候我们再设置element的height为0，padding-bottom:50%;

.elementwidth:50%;height:0;padding-bottom:50%;background:#eee;

element就变成了一个宽度50%，高度为0（但是他有50%width的padding-bottom）的正方形了，效果如下图灰白色的div

这个时候可能有人要问了，这个div的高度为0，那如果我要在element里放置元素呢，那岂不是overflow了，这里就要提到overflow属性了，它的计算是包括div的content和padding的，也就是说，

原来你的div可能是个width：50px;height:50px;padding:0的div，现在变成width:50px;height:0;padding-bottom:50px;的div了，尺寸还是一样的，通过指定这个div的子元素的定位，一样可以正常显示

这样就可以通过设定父级元素father、我们需要的元素element、子级元素datail来实现任意情况下该需求（div宽高定比例）。

UI开发核心问题-UI随屏幕自适应

屏幕分辨率对UI适配的影响

　　一般来说，UIRoot都会选择FixSize的缩放模式，这样可以让UI随着分辨率而自动缩放，保持和屏幕相对的大小比例不变，让UI整体看上去不会有变大变小的奇怪现象。但是，还有另一个真正严重的问题：不同屏幕的宽高比不一样。

　　在Unity中，不同屏幕的宽高比，一般都会以高度为基准而拉伸宽度。

　　切换屏幕比例模式的方法为在Game视图中的屏幕比例菜单，FreeAspect为不限长宽比，可以在其中选择想要的长宽比。

　　如果屏幕比例菜单中没有想要的屏幕比例，可以单击菜单最底部那个小较好按钮，会弹出一个让自定义一个新的屏幕比例模式的界面，Label选项中，可以输入一个名称来为这个自定义的屏幕比例命名。在Type中可以选择FixedResolution和Aspect Ratio两个选项，如果选择FixedResolution，可以在下面的Width&Height中输入分辨率的宽和高的具体像素；如果选择Aspect Ratio，可以在下面的Width&Height中输入分辨率的宽高比。设定好之后单击OK按钮，即可保存这个自定义的屏幕分辨率模式。

　　因为NGUI的UIRoot具备FixSize模式，所以，一般在进行UI随屏幕自适应时，主要着重解决的是屏幕宽高比发生变化之后的自适应。

 

主流设备的屏幕分辨率

　　不论是PC设备还是移动设备，屏幕分辨率一般处于4:3到16:9之间，一般来说，只需要考虑这两个值作为极限值即可。

 

自适应核心组件Anchor的使用

　　所谓Anchor，即为锚点，它的工作原理是它会自动地绑定摄像机的某一个点作为锚点，锚点一共有上左、上、上右、左、中、右、左下、下、右下9个点可以设定。当相机变动时，Anchor组件所在的物体位置也会跟随相机的变动而变动，并始终处于相机边界的锚点位置。

　　Anchor的创建方式，在Unity顶部NGUI菜单中选择Create->Anchor即可。

　　Anchor组件的设置：

　　　　UICamera选项自动锁定了该Anchor所在的UI的摄像机，它将会绑定这个摄像机边缘上的某一个点作为锚点。Container即为包含的物体，一般情况下无需设置，因为将物体放置于Anchor的子物体中，就可以利用“子物体跟随父物体”实现跟随Anchor的锚点。

　　　　Side一项为核心项，选择该Anchor的脑电，一共9个点，分别对应相机边缘的上左、上、上右、左、中、右、左下、下、右下。

　　　　RunOnlyOnce意为执行一次，即只在开始的时候进行一次适配，默认为勾选上，一把把不需要去修改它。

　　　　RelativeOffset，这是Anchor的相对位置偏移，百分比形式的。

　　　　PixelOffset，像素偏移，Anchor会相对于相机边缘上的锚点以像素为单位进行偏移。

 

使用Anchor的注意事项

　　(1)在设定了Anchor的Side锚点之后，Anchor会自动跑到响应的锚点位置上去，不需要手动拖动Anchor。

　　(2)不论是3D UI还是2D UI，Anchor的用法是一模一样的，不要手动拖动Anchor的位置。

　　(3)一般情况下，尽量不要去设置Anchor的RelativeOffset和PixelOffset，就让Anchor保持锚点原位置，然后将UI控件放到Anchor下作为子物体，再去调整UI控件的位置。

　　(4)Anchor物体身上，尽量保证只有Anchor一个组件，以便于管理维护。

　　(5)一套UI体系中，可以有无数多个Anchor(例如有5个Anchor都定位于左上角是被允许的)，但是，尽量确保Anchor的父物体中没有Anchor，也就是尽量避免Anchor中套Anchor。Anchor的父物体可以是UI Root，也可以是一个空物体。

　　(6)不要滥用Anchor，如果相机边缘的9个锚点中的每个点都有多个Anchor来定位，那么一定是UI结构的实际有问题了。

 

正式开发UI之前必须明确的几个问题

　　(1)针对的是什么样的平台。

　　(2)游戏的设备屏幕宽高比最大、最小是几比几。

　　(3)游戏开发时的标准分辨率是多少像素，这将关系到美术制作图片资源的标准。

　　(4)检查UI设计草图，和策划人员明确哪些UI会在屏幕宽高比变化时自适应位置。

　　(5)明确需要自适应位置的UI分别属于哪一个锚点，并设计一个最佳的UI结构。