css样式遇到的常见问题,开发过程遇到的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边框

请

在微信小程序中我使用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粗细、其他无；

(@_@;)

┭┮﹏┭┮