Http://codepen.io/airen/details/XbVBZo
<Div><span>1</span></Div><Div><span>2</span></Div><Div><span>3</span></Div><Div><span>4</span></Div><Div><span>5</span></Div><Div><span>6</span></Div><Div><span>7</span></Div><Div><span>8</span></Div><Div><span>9</span></Div><Div><span>10</span></Div>
SCSS Code:
Body{width:100%;font-size:0;text-align:Center;}Div{Display:Inline-block;width:20%;background:Green;font-size:12px;position:relative;vertical-align:Middle;&:Nth-child (2n) {Background:orange; }&:before{content:"";Display:Inline-block;Padding-bottom:100%;width:. 1px;vertical-align:Middle; }span{Display:Inline-block;vertical-align:Middle;font-size:4em;Color:#fff; }}
CSS code:
Body{width:100%;font-size:0;text-align:Center;}Div{Display:Inline-block;width:20%;background:Green;font-size:12px;position:relative;vertical-align:Middle;}div:nth-child (2n){background:Orange;}Div:before{content: "";Display:Inline-block;Padding-bottom:100%;width:. 1px;vertical-align:Middle;}Div span{Display:Inline-block;vertical-align:Middle;font-size:4em;Color:#fff;}
Mobile-side layout, div proportional layout, width as a percentage, height and width, i.e., make Div square