大佬教程收集整理的这篇文章主要介绍了angularjs – 角材料设计 – 更改flex值与屏幕尺寸，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
请在下面的代码中看到我的意见：
<div layout="row"> <div layout="row" flex="75" layout-sm="column" class="ptn-info-grid" layout-margin> <!-- USING ROW FOR DESKTOP AND columN FOR MOBILE DEVICES --> <div layout="column" flex="66"> <!-- I want this div occupy 2/3 of screen in Desktop but change to 100 in mobile devices (but stays in 66) --> <div layout="row" layout-sm="column"> <div class="ptn-info-grid-item" flex>1</div> <div class="ptn-info-grid-item" flex>2</div> </div> <div layout="row" layout-sm="column"> <div class="ptn-info-grid-item" flex>3</div> <div class="ptn-info-grid-item" flex>4</div> </div> </div> <div layout="column" flex="32"> <!-- I want this div occupy 1/3 of screen in Desktop but change to 100(which actually happens) in mobile devices. Im not using 33 because while using margin for child elements this div goes out of the parent div a little. --> <div class="ptn-info-grid-item" flex style="margin-left: 0px;">Right Long </div> </div> </div> <div layout="row" flex="25" id="customer-phone-img"></div>
但是，将上面的flex值从“flex = 66”和“flex = 32”改为简单的flex和flex，在移动设备中给出了我想要的结果，但是，正如你所知，在桌面上，而不是2：一半和一半。
请参见附图。
预期
a busy cat http://dev.sprintu.com/imgHelp/final1.png
怎么回事
a busy cat http://dev.sprintu.com/imgHelp/final2.png
所以我正在寻找一种方法来改变较小屏幕的flex值(当应用layout-sm时 – 将flex = 66改为flex = 100)。
基本上，您可以使用以下选项：
> flex – 设置所有的flex。
> flex-sm – 在宽度小于600像素的设备上设置flex。
> flex-gt-sm – 在大于600px宽的设备上设置flex。
> flex-md – 将设备上的flex设置为600px到960px宽。
> flex-gt-md – 在大于960px宽的设备上设置flex。
> flex-lg – 在设备上在960px和1200px之间设置flex。
> flex-gt-lg – 在宽度大于1200像素的设备上设置flex。
所以改变你的：
<div layout="column" flex="66">
至
<div layout="column" flex-gt-sm="66">
而且div只会在大于小(移动)时使用66的宽度，
以上是大佬教程为你收集整理的angularjs – 角材料设计 – 更改flex值与屏幕尺寸全部内容，希望文章能够帮你解决angularjs – 角材料设计 – 更改flex值与屏幕尺寸所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。