开发过程遇到的css样式问题记录

一、移动端

1.部分安卓机圆角border-radius失效，显示为方形状？

　　  background-clip: padding-box;  

 2.部分安卓机字体图标出现锯齿？

　　使用iconfont图标时，小米8机型出现锯齿。

　　也可解决字体不清晰。

　　  -webkit-font-smoothing: antialiased;  

　　  -moz-osx-font-smoothing: grayscale；    

3.安卓机devicePixelRatio值较大，图片显示模糊

　　使用2X图

　　背景图设置：   background-size: contain; 

4.上下滑动时卡顿、慢

body {
     -webkit-overflow-scrolling: touch;
     overflow-scrolling: touch;
}

5.禁止选中/复制文字

　　需要加上浏览器前缀。

    -webkit-user-select: none;
    moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;

6.长时间按住页面开始闪动

　　  -webkit-touch-callout: none; 

7.Iphone机的输入框出现内阴影

　　  -webkit-appearance: none;  

8.触摸元素时出现半透明灰色遮罩

　　  -webkit-tap-highlight-color: rgba(255,255,255,0) 

9.Retina屏的1px边框

　　请 bing一下关键字，解决方式不一。

　　在微信小程序中我使用1rpx居多，安卓机和果机粗细差别大时使用伪代码::after

.item::after {
    content: '';
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 2rpx solid #e5e5e5;
    transform: scale(0.5);
    transform-origin: 0 0;
    z-index: 0;
}

10. 可以用css动态计算元素高度

　　设计稿以750px为准。

　　  height: calc(100%-97/750);  

　　动态计算高度还是用JS比较稳妥。

11.文字加粗

　　无法加粗的情况下可使用字体阴影。

　　  text-shadow: 0px 0px #000;  

12.两端字体设置情况

　　果机设置字体："PingFang SC" ，支持字重100至900粗细；

　　安卓机设置字体："Noto Sans CJK"(思源黑体中日韩)(Noto Sans 字体)，支持字重400和700粗细、其他无；　　

    

　　(@_@;)

　　┭┮﹏┭┮