input点击时候,有个灰块
outline:medium;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only;
横向滚动。
.container { overflow-x: scroll; overflow-y:hidden; white-space:nowrap; padding: 15px 0px 20px; .item { display: inline-block; width: 33%; img { width: 70%; } } }
宽度计算。android4.3不兼容。android4.4部分兼容
width: calc(~'100% - 54px');
CSS单行省略号:
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
CSS多行省略号:(padding过大,会无效果)
display: -webkit-box; text-overflow: ellipsis; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
CSS垂直剧中 flex
.y-item-img-bg { position: absolute; right: 6%; top: 10px; width: 30%; height: 80px; display: flex; display: -webkit-flex; text-align: center; align-items: center; justify-content: center; img { max-width: 100%; max-height: 100%; } }
CSS正方形(头图) padding-bottom: 100% 。(height:100%。 会导致图片更改图片比例,若图片不是正方形,图片会被压缩。)
.img-bg{ position: relative; height: 0; margin: 0; overflow: hidden; padding-bottom: 100%; .item-img { position: absolute; top: 0px; left: 0px; bottom: 0px; width: 100%; height: 100%; } }
1像素line。 transform 是关键。
:global .line { width: 100%; height: 1px; background-color: #EBEBEB; -webkit-transform: scale(1, 0.5); transform: scale(1, 0.5); }
input placeholder 设置
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #cccccc; } input:-moz-placeholder, textarea:-moz-placeholder { color: #cccccc; } input::-moz-placeholder, textarea::-moz-placeholder { color: #cccccc; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #cccccc; }
屏幕宽度
document.documentElement.clientWidth