前端遇到的那些技术难点及性能优化之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;

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.1CSS 基础与选择器初识 | CSS 1. CSS 加载方式有几种? CSS样式加载一共有四种方式: 1、行...
    没糖_cristalle阅读 755评论 0 0
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,332评论 2 66
  • 目录 Day01标签行元素 Day02表单元素css选择器伪类选择符行内元素块元素表格 Day03文本相关属性列表...
    Moquyun阅读 533评论 0 0
  • 第一章 F12: element.style 内联样式(可以直接在上面写代码进行简单调试) user agent...
    fastwe阅读 1,532评论 0 0
  • 1.Label的作用是什么?是怎么用的 答案: label标签来定义表单控制间的关系当用户选择该标签时,浏览器会自...
    耶啵_阅读 744评论 0 0