响应式设计二

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%);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容