如題 我想設計一個根據畫面大小自動計算寬度的css
目前是用media query取三個點設置寬度
.dt {
vertical-align: top;
width: 36%;
padding-right: 4%;
text-align: right;
}
@media screen and (min-width: 728px) and (max-width: 1556px) {
.dt {
width: 32%;
}
}
@media screen and (min-width: 1557px) and (max-width: 1734px) {
.dt {
width: 34%;
}
}
而我這次想用calc來達到全自動的運算 運算方程式大概是長這樣
當width=728px
width=[(728-200)/2-30]/728=234/728=0.321.....約32%
而用calc(100%)=514px
calc(?)=32%
當width=950px
width=[(950-200)/2-30]/950=345/950=0.363.....約36%
而用calc(100%)=693px
calc(?)=36%
求?的運算式
而且不曉得為啥我用calc(100% - 100px)會無作用
已邀請的邦友 {{ invite_list.length }}/5
剛好在學數學，來挑戰一下
參考：CSS沒有極限 - CSS的神奇Calc運算
設calc(100%)為x
原文width=[(728-200)/2-30]/728=234/728=0.321.....約32%
[(x-200)/2-30]
=[x/2-100-30]
=[x/2-130]
=50%x-130
故？＝50%-130
f(50%x-130)分別代入728,950進行驗證
f(364-130)=234
f(475-130)=345
所得答案均為真，故證明此公式為真
證明題初學，有錯誤地方歡迎指正
iThome鐵人賽
看影片追技術