是否有可能從母公司獲得的寬度孩子身高動態由上海社會科學院功能使用媒體查詢？

-5

我想設置各種屏幕尺寸的子項高度動態使用sass功能，而不是手動編寫。我知道我們可以使用CSS position: absolute;財產或者乾脆使用jQuery代碼來獲得結果，但我想頂嘴功能使用，實現子項的值。

**我們可以給寬度百分比值，但沒有給出百分比值時給予position: absolute;不會導致高度。

檢查我的筆：http://codepen.io/nikhil8krishnan/pen/adqbeR?editors=1000

檢查下面的代碼，在這裏，我在每個屏幕尺寸手動編寫項目值。

輸出

.container { 
    background-color: red; 
    margin: auto; 
    text-align: center; 
    color: #fff; 
    font-size: 0; 
} 

.child { 
    display: inline-block; 
    border-right: solid 1px #fff; 
    background-color: green; 
} 

/* container width and child width & height is set by manually on each screen size*/ 
/*max to 767px*/ 
.container { 
    width: 100%; 
} 

.child { 
    width: 25%; 
    height: 25%; 
} 

@media (min-width: 768px) { 
    .container { 
    width: 600px; 
    } 

    .child { 
    height: 150px; 
    width: 150px; 
    } 
} 
@media (min-width: 980px) { 
    .container { 
    width: 800px; 
    } 

    .child { 
    height: 200px; 
    width: 200px; 
    } 
} 
@media (min-width: 1200px) { 
    .container { 
    width: 1000px; 
    } 

    .child { 
    height: 250px; 
    width: 250px; 
    } 
}

怎麼能寫我用青菜功能的代碼？是否有可能請分享想法。

來源

2016-01-22 Krish

其實你並不需要經常換.child每一個斷點。一旦你設置了寬度：25％就足夠了。只要改變容器（你甚至可以用寬度：768px後80％） – fcalderan

然後，我怎樣才能得到子項目高度？ – Krish

沒有函數來獲取與薩斯任何元素的高度或寬度，因爲薩斯只編譯到CSS。你要求的必須是CSS的一個特性。 – cimmanon

-2

要自動的媒體查詢的出口，你可以使用下面的函數

$viewports: (100%, 600px, 800px, 1000px); 

@each $viewport in $viewports { 
    @media (min-width: #{$viewport}) { 
    .container { 
     width: $viewport; 
    } 

    .child { 
     height: $viewport/4; 
     width: $viewport/4; 
    } 
    } 
}

一個例子：http://www.sassmeister.com/gist/e87c4121d584776355cd

來源

2016-01-22 10:34:48

太棒了，但是這個答案只有在查看端口大小和容器寬度都相同的情況下才有可能。但是，這兩者是不同的，所以它是如何完成的？ – Krish

是否有可能從母公司獲得的寬度孩子身高動態由上海社會科學院功能使用媒體查詢？

回答

相關問題