扎过的针装满5升水桶！石智勇：内收肌确实断裂了

黎奥运会举重男子73公斤级决赛，石智勇抓举165kg，领先第二名10kg！但在挺举中受伤病影响，三次试举191kg均宣告失败，无缘领奖台。

赛后，石智勇接受人民日报记者采访时回应：

我的第三届奥运会带着遗憾落幕，很对不起大家对我的期望，但是我没有对不起自己，为了参加奥运会我已经付出了所有。

备战巴黎奥运会的过程充满艰难，严重的腰伤让我离开国际赛场两年多，为了奥运三连冠的梦想，我每天都在扎针治疗，针灸针已经装满5升的饮料桶，从今年2月到现在，我已经打了50多针封闭。但能站上奥运赛场，所有的付出都是值得的。

石智勇进行扎针治疗

针灸针装满了饮料桶

这场比赛我在抓举建立起了10公斤的优势，算是梦幻开局。考虑到对手的挺举实力以及冲金是唯一目标，我决定将开把重量确定在191公斤，逼迫对手必须举起202公斤才能赢我。但是第一把试举时上挺环节腰还是有点软，没能成功，连续试举也让我力竭，第三把试举时我确实拼尽了全力，我翻起杠铃之后听到左腿内收肌“啪”地响了一声，经过检查，我的内收肌确实断裂了。

拼过就不后悔，这场比赛对我来说是失败的，但备战奥运会的整个过程是成功的，我依然为自己骄傲。

我也看到大家的暖心留言了，真的很感动。竞技体育很残酷，但你们的支持和理解给了我力量。我已经练了21年举重，举重带给我荣耀和幸福，为国争光永远是我向前的动力。

感谢中国举重队对我的信任和支持，为我提供了最完备的保障。虽然我没能实现奥运三连冠，但是我的队友们还将继续为中国体育代表团争夺荣誉。无论面对什么困难，中国举重队永远顽强拼搏、挑战极限、超越自己，永不放弃！希望大家继续支持中国举重队！

转自：人民日报客户端

来源：浙江新闻

近在开发H5，ui稿给的border：1px solid,因为ui稿上的宽度是750px，我们运行的页面宽度是375px，所以我们需要把所有尺寸/2。所以我们可能会想写border：0.5px solid。但是实际上，我们看页面渲染，仍然是渲染1px而不是0.5

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: Arial, sans-serif;
      }

      .flex {
        display: flex;
      }
      .item {
        margin-right: 10px;
        padding: 10px;
        font-size: 13px;
        line-height: 1;
        background-color: rgba(242, 243, 245,1);
      }
      .active {
        color: rgba(250, 100, 0, 1);
        font-size: 14px;
        border: 0.5px solid ;
      }
    </style>
  </head>
  <body>
    <div class="flex">
      <!-- <div class="item active">
        active
      </div> -->
      <div class="item">
        item1
      </div>
      <div class="item">
        item2
      </div>
      <div class="item">
        item3
      </div>
    </div>
  </body>
</html>

在没active的情况下

他们的内容都是占13px

在有active的情况下

active占了14px这个是没问题的，因为它font-size是14px嘛，但是我们是设置了border的宽度是0.5px，但展现的却是1px。

再来看看item

它内容占了16px，它受到相邻元素影响是14px+2px的上下边框

为啥border是1px呢

在 CSS 中，边框可以设置为 0.5px，但在某些情况下，尤其是低分辨率的屏幕上，浏览器可能会将其渲染为 1px 或根本不显示。这是因为某些浏览器和显示设备不支持小于 1px 的边框宽度或不能准确渲染出这样的细小边框。

浏览器渲染机制

不同浏览器对于小数像素的处理方式不同。一些浏览器可能会将 0.5px 边框四舍五入为 1px，以确保在所有设备上的一致性。

设备像素比

在高 DPI（如 Retina 显示器）设备上，0.5px 边框可能看起来更清晰，因为这些设备可以渲染更细的边框。
在低 DPI 设备上，0.5px 边框可能会被放大或者根本不会被显示。

解决办法

方法一：使用伪类和定位

.active {
  color: rgba(250, 100, 0, 1);
  font-size: 14px;
  position: relative;
}
.active::after {
  content: "";
  pointer-events: none;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  border: 1px #ff892e solid;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

另外的item的内容高度也是14px了符合要求

方法二：使用阴影，使用F12看的时候感觉还是有些问题

.active2 {
  margin-left: 10px;
  color: rgba(250, 100, 0, 1);
  font-size: 14px;
  position: relative;
  box-shadow: 0 0 0 0.5px #ff892e;
}

方法三：使用svg，但这种自己设置了宽度。

<div class="active">
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect x="0" y="0" width="100" height="100" fill="none" stroke="#ff892e" stroke-width="0.5"></rect>
  </svg>
  active
</div>

方案四：使用svg加定位，也比较麻烦，而且有其他的问题

<div class="active">
    <svg viewBox="0 0 100 100" preserveAspectRatio="none">
        <rect x="0" y="0" width="100" height="100" fill="none" stroke="#ff892e" stroke-width="0.5"></rect>
    </svg>
    <div class="content">active</div>
</div>

.active {
  color: rgba(250, 100, 0, 1);
  font-size: 14px;
  position: relative;
  display: inline-block; 
}
.active svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; 
  box-sizing: border-box;
}
.active .content {
  position: relative;
  z-index: 1; 
}

方法五：使用一个父元素比较麻烦

<div class="border-container">
  <div class="active">active</div>
</div>

.border-container {
  display: inline-block;
  padding: 0.5px; 
  background-color: #ff892e; 
}

.active {
  color: rgba(250, 100, 0, 1);
  font-size: 14px;
  background-color: white; 
}

最后

在公司里，我们使用的都是方案一，这样active和item它们的内容高度都是14px了。然后我们再给他们的父盒子加上 align-items: center。这样active的高度是14px，其他都是13px了。但是active的高度会比其他item的盒子高1px，具体看个人需求是否添加吧。

们的真机操作页面实际很复杂

（业界良心功能配置，好不好！）

分为手机区域(1)、操作区域(2) 、log显示

并且，还存在横屏与竖屏的状态

上述3个区域的位置与大小是不一致的

此外，整个操作页面还根据浏览器窗口大小自适应（如下图）

并且还考虑了手机分辨率的不同，正常为16 : 9，但是比如下图的魅族这货，我们也进行了兼容，各位可以去试试看。

以上条件改如何满足呢？

用js的话需要自己写，还有bug，还要考虑资源占用等等问题。还有可怕的横竖屏切换！

所以在这里，css才是坠吼的！！

好了，接下来就是见证奇迹的时刻

打开IDE，输入巴拉巴拉一套。这里我们用图片代替手机，1080*1920

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

body{margin:0;padding:0;}

.main{background: #e3e8f7;padding:20px;}

.main>div{position: relative;}

 .mobile{width:25%;}
 img{display: block;}
 .operate,.log{position: absolute;right:0;width:75%;background: #fff;}
 .operate{height:60%;top:0;background: pink;}
 .log{height:40%;bottom:0;background: gold;}
 </style>
</head>
<body>
<div class="main">
 <div>
 <div class="mobile">
 <img src="m1.png">
 </div>
 <div class="operate">
 <div>操作区域</div>
 </div>
 <div class="log">log区域</div>
 <div class="rect"></div>
 </div>
</div>
</body>
</html>

一顿操作猛如虎，在chrome中查看一下，是不是完美？

然而捉鸡的是，我们实际显示手机的部分是canvas，并不是图片，怎么办？canvas可不会自己撑开宽高哦！

我们这里就采用padding来设置16/9/4=>44.44444%

<style>

…

.canvas{background: #e3e3e3;padding:44.44444% 0 0; width:25%;}
</style>
<div class="main">
 <div>
 <div class="mobile">
 <!--<img src="m1.png">-->
 <div class="canvas">
 <span>这里是手机</span>
 </div>
 </div>
 <div class="operate">
 <div>操作区域</div>
 </div>
 <div class="log">log区域</div>
 <div class="rect"></div>
 </div>
</div>

竖屏状态就收工了，并且各区域会根据窗口大小自由伸缩。

那么横屏状态呢？先上图片

代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 body{margin:0;padding:0;}
 .main{background: #e3e8f7;padding:20px;}
 .main>div{position: relative;}
 img{display: block;}
 .mobile{width:25%;}
 .operate,.log{position: absolute;right:0;width:75%;background: #fff;}
 .operate{height:60%;top:0;background: pink;}
 .log{height:40%;bottom:0;background: gold;}
 .canvas{background: #e3e3e3;padding:177.7778% 0 0;}
 span{position: absolute;top:0;}
 .laydown .mobile{width:50%;}
 .laydown .canvas{padding:56.25% 0 0;}
 .laydown .log,.laydown .operate{width:50%;}
 .laydown .rect{padding:15% 0 0;}
 .laydown .operate{padding:28.125% 0 0;height: auto;}
 .laydown .log{padding:15% 0 0;height: auto;width:100%;}
 </style>
</head>
<body>
<div class="main laydown">
 <div>
 <div class="mobile">
 <!--<img src="m1.png">-->
 <div class="canvas">
 <span>这里是手机</span>
 </div>
 </div>
 <div class="operate">
 <span>操作区域</span>
 </div>
 <div class="log">
 <span>log区域</span>
 </div>
 <div class="rect"></div>
 </div>
</div>
</body>
</html>