安庆公司

    网页设计栅格系统

    日期:2019-06-21 人气:333401
    导读: 栅格系统的形成 栅格系统(Grid system)最早使用在17世纪末的法国印刷业,出版业。 维基百科对其定义为:栅格设计系统(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格),是一种平面设计的方法与风格。 网页栅格系统是有平面栅格系统中发展而来,以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。 &

     栅格系统的形成

     
    栅格系统(Grid system)最早使用在17世纪末的法国印刷业,出版业。
     
    维基百科对其定义为:栅格设计系统(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格),是一种平面设计的方法与风格。
     
    网页栅格系统是有平面栅格系统中发展而来,以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
     
     
    02
     
    栅格系统的原理
     
     
    栅格系统可以按栅格数分为12列,16列,24列等,可以自由设计栅格宽度和栅格与栅格间宽度。如下图所示,记页面或区块宽度为W,A代表一个栅格单元的宽度,a代表一个栅格的宽度,i为栅格与栅格之间的距离,n为正整数,则有W=(a*n)+(n-1)*i,由于A=a+i,可得(A*n)-i=W。
     
     
      (A*n)-i = W
     
    这个公式表述了网页的布局与网页背后栅格系统之间的关系。来观察经典的雅虎案例:
     
     
     
    Yahoo的网站页面宽度为W=950px,每个区块与区块的间隔为i=10px;如