亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

pc端設計規范-第一節概要

標簽:
設計

栅格化并不是一个新的概念,大家关注的点往往是他表面的950、960和1190。

左边的三个数据的核心是一个24等分的栅格系统。

可以被轻松的2等分、3等分、4等分、6等分、8等分、12等分,还可以做到1:2、1:3、1:5、2:4、1:7、3:5的不对称分割,并且可以精确到像素。由于3:5和3等分的需求,所以[3,8]得到了24这个结果。
W = A * n – i;
A = a + i;
i:被分割的区块之间的间隔(为了方便计算,大都为10px)

整个公示中,i和n一样是核心,再确定i,即可确定整个栅格化系统。

当n = 24, i = 10;假如A=40,则W=950;假如A=50,则W=1190;假如A=60,则W=1430

虽然A的值可以变成“任何”一个值,但有观点认为栅格化仍然是不太适合弹性布局。因为弹性布局的关键在用百分数单位来替代像素的单位,用百分数来表示无法整出100的分割方案。

好像如果在界面中有5等分的需求,整个栅格化系统将变得复杂[3,5,8],也就是120等分。但其实并不需要如此,因为i并没有改变,只是把a缩小,但对于24等分的下的组合并没有产生变化。所以只需要设置每个A为20%,然后每个A的右测内边距为10即可以融入原来的24分的栅格化系统。

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 1
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消