响应式设计二

1.中文chrome最小字体

html {
font-size: 62.5%;
color: #222;
}
在chrome中1rem等于12px，中文最小是12px

2.排除第一个

Paste_Image.png

3. 一行显示

一面有一个-3px，inline-block有一个换行符
必须用font-size：0；来去除空格
header .top ul li {
display: inline-block;
}

4.透明 rgba 一般用

.trans-data span.trans-money {
font-size: 2.2rem;
color: #ff9900;
letter-spacing: 3px;
margin: 0 1rem;
padding: 0 1rem;
border-radius: 3px;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 1px 2px 1px #333 inset;
}

5.设置三等分calc 是css动态计算结果

Paste_Image.png

6.content设置空格

Paste_Image.png

7.文字不换行，截断，隐藏滚动条一起使用

.notice a:first-child {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

3.变灰

-webkit-filter: grayscale(100%);
filter: grayscale(100%);