iT邦幫忙

0

calc進階運算

如題 我想設計一個根據畫面大小自動計算寬度的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)會無作用

2 個回答

0
來杯拿鐵
iT邦新手 4 級 ‧ 2018-12-16 15:38:33

剛好在學數學,來挑戰一下
參考: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
所得答案均為真,故證明此公式為真

證明題初學,有錯誤地方歡迎指正

下面有註明calc(100%)分別是514跟693哦 如果是728跟950我就不用跑上來發這篇了.....

那F(514)=32%,f(693)=36%
4%x=179
x=4475
答:calc(100%/4475)

0
小魚
iT邦高手 1 級 ‧ 2018-12-17 15:04:36

你的 calc(100% - 100px) 在哪裡 ?

我要發表回答

立即登入回答