常见工作中遇到的问题

(1)1px 方案
做过移动端需求的前端肯定是避免不了处理 1px 细线问题,这个问题的原因就是 UI 对页面美观度的要求越来越高(不要和我说这是 retina 屏的问题)

.min-device-pixel-ratio(@scale2, @scale3) {
  @media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
    transform: @scale2;
  }
  @media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {
    transform: @scale3;
  }
}

.border-1px(@color: #DDD, @radius: 2PX, @style: solid) {
  &::before {
    content: "";
    pointer-events: none;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    border: 1PX @style @color;
    border-radius: @radius;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    @media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
      width: 200%;
      height: 200%;
      border-radius: @radius * 2;
      transform: scale(.5);
    }
    @media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {
      width: 300%;
      height: 300%;
      border-radius: @radius * 3;
      transform: scale(.33);
    }
  }
}

.border-top-1px(@color: #DDD, @style: solid) {
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-top: 1Px @style @color;
    transform-origin: 0 0;
    .min-device-pixel-ratio(scaleY(.5), scaleY(.33));
  }
}


(2)内联首屏关键 CSS
我们要做的优化就是找出渲染首屏的最小 CSS 集合(Critical CSS),并把它们写到 部分,从而让浏览器接收到 HTML 文件后就尽快渲染出页面。对于剩余部分的 CSS,我们可以使用异步的方式进行加载。对于如何判断哪些 CSS 是首屏渲染需要的,我们需要通过分析 DOM 结构来确定。

<!doctype html> 
 <html>
 <head> 
	 <style> /* inlined critical CSS */ </style>
	 <script> loadCSS('non-critical.css'); </script> 
 </head> 
 <body> ...body goes here </body> 
 </html>

在上面的代码中,我们取出首屏渲染所必须的 critical CSS,以内联的方式写在 之中,然后使用 loadCSS() 异步加载剩余部分的 CSS 样式,这相当于离线加载剩余部分的 CSS 样式,然后在后台将其注入到页面中。


(3)文字两端对齐
需求中我们也经常遇到这样的需求,这里直接提供方案

// html
<div>姓名</div>
<div>手机号码</div>
<div>账号</div>
<div>密码</div>

// css
div {
    margin: 10px 0; 
    width: 100px;
    border: 1px solid red;
    text-align: justify;
    text-align-last:justify;
}

常见工作中遇到的问题_第1张图片


(4)浏览器会从右到左解析 CSS 选择器
常见工作中遇到的问题_第2张图片


(5)Text-Transform 简单介绍

常见工作中遇到的问题_第3张图片


**(6)~ 和 + 两个选择器 **
常见工作中遇到的问题_第4张图片

你可能感兴趣的:(小技巧)