目录
字体样式
caret-color
可以去掉字体默认光标,可以用于css重置文件当中
*{
caret-color: rgba(0,0,0,0);
}
-webkit-overflow-scrolling
属性是来控制元素在移动设备上是否有回弹的效果
auto
:使用普通滚动,当手指在屏幕上离开时,滚动立即停止
touch
:使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
兼容性写法:
verflow:auto;/* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */
bug
当你给一个元素设置过position:absolute;
或者position:relative;
后再增加-webkit-overflow-scrolling: touch;
属性后,你会发现,滑动几次后可滚动区域会卡主,不能在滑动,这时给元素增加个z-index
值就可以了。
-webkit-overflow-scrolling: touch;
position:absolute;
z-index:1;
white-space文本显示隐藏
超出文本显示加省略号,后面又加入移入效果显示:hover,看自己需要,可加可不加
设置:hover
h1{
overflow: hidden;//溢出隐藏
white-space: nowrap;//禁止换行
text-overflow: ellipsis;//...
}
h1:hover{
width:200px;
overflow: visible;
white-space: pre-line;
cursor:pointer;
}
-webkit-text-size-adjust: 100%;
PC端页面文字在移动端没有等比例缩小,而是变得很大,设置
html,body{-webkit-text-size-adjust: 100%;}
推荐采用-webkit-text-size-adjust: 100%;
ps:如果要用小于12px字体时,用-webkit-transform: scale( ) 缩小到合适值。
font-smoothing
对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。
-webkit-font-smoothing: antialiased;/*chrome、safari*/
-moz-osx-font-smoothing: grayscale;/*firefox*/
text-rendering: optimizeLegibility;
对文本字体渲染起作用,相当于图片使用svg,缩放兼容性非常好,一般放在重置样式文件或者app.vue里面的style全局样式里面
持续更新中~~~
感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!