103.CSS布局技巧

[neptoo]

阅读原文

灵活运用CSS开发技巧

CSS布局技巧

rem自适应布局

移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size

/* 基于UI width=750px DPR=2的页面 */
html {
    font-size: calc(100vw / 7.5);
}

使用:nth-child()选择指定元素

.specified-scope {
  width: 300px;

  li {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    color: #fff;

    &:nth-child(odd) {
      background-color: #f66;
    }

    &:nth-child(even) {
      background-color: #66f;
    }

    &:nth-child(n+6):nth-child(-n+10) {
      /*6-10行*/
      background-color: #3c9;
    }
  }
}

使用writing-mode排版竖文

.vertical-text {
	writing-mode: vertical-rl;
	h3 {
		padding-left: 20px;
		font-weight: bold;
		font-size: 18px;
		color: #f66;
	}
	p {
		line-height: 30px;
		color: #66f;
	}
}

使用text-align-last对齐两端文本

.justify-text {
	li {
		margin-top: 5px;
		padding: 0 20px;
		width: 100px;
		height: 40px;
		background-color: #f66;
		line-height: 40px;
    /* !! */
		text-align-last: justify;
		color: #fff;
		&:first-child {
			margin-top: 0;
		}
	}
}