前端遇到的那些技术难点及性能优化之css篇
移动端兼容
css篇
移动端的 1px
问题描述：1px 的边框。在高清屏下，移动端的 1px 会很粗。
产生原因：首先先要了解一个概念：DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的情况下，设备像素和 CSS 逻辑像素的比值。目前主流的屏幕 DPR=2 或者 3。CSS中设置的px是逻辑像素,这就造成1px变成物理像素的2px或者3px，比如2 倍屏，设备的物理像素要实现 1 像素，所以 CSS 逻辑像素只能是 0.5px。
下面介绍最常用的方法
通过CSS :before 选择器或CSS :after 选择器设置height:1px，同时缩放0.5倍实现。
/* 底边框 */
.b-border {
position: relative;
}
.b-border:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: #d9d9d9;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
/* 四条边 */
.setBorderAll {
position: relative;
&:after {
content: ' ';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
box-sizing: border-box;
border: 1px solid #e5e5e5;
border-radius: 4px;
}
}
CSS动画页面闪白,动画卡顿
问题描述：CSS动画页面闪白,动画卡顿
解决方法: 1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位 2.开启硬件加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
屏蔽用户选择
禁止用户选择页面中的文字或者图片
div {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
清除输入框内阴影
问题描述：在 iOS 上，输入框默认有内部阴影 解决方式：
input {
-webkit-appearance: none;
}
禁止保存或拷贝图像
img {
-webkit-touch-callout: none;
}
输入框默认字体颜色设置
设置 input 里面 placeholder 字体的颜色
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #c7c7c7;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #c7c7c7;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #c7c7c7;
}
用户设置字号放大或者缩小导致页面布局错误
设置字体禁止缩放
body {
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}
android系统中元素被点击时产生边框
部分android系统点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样。去除代码如下
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0)
-webkit-user-modify:read-write-plaintext-only;
}
iOS 滑动不流畅
ios 手机上下滑动页面会产生卡顿，手指离开页面，页面立即停止运动。整体表现就是滑动不流畅，没有滑动惯性。 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。
解决方式 1.在滚动容器上增加滚动 touch 方法
.wrapper {
-webkit-overflow-scrolling: touch;
}
2.设置 overflow 设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动，超出的部分 body 隐藏。
body {
overflow-y: hidden;
}
.wrapper {
overflow-y: auto;
}
