扎過的針裝滿5升水桶！石智勇：內收肌確實斷裂了

黎奧運會舉重男子73公斤級決賽，石智勇抓舉165kg，領先第二名10kg！但在挺舉中受傷病影響，三次試舉191kg均宣告失敗，無緣領獎臺。

賽后，石智勇接受人民日報記者采訪時回應：

我的第三屆奧運會帶著遺憾落幕，很對不起大家對我的期望，但是我沒有對不起自己，為了參加奧運會我已經付出了所有。

備戰(zhàn)巴黎奧運會的過程充滿艱難，嚴重的腰傷讓我離開國際賽場兩年多，為了奧運三連冠的夢想，我每天都在扎針治療，針灸針已經裝滿5升的飲料桶，從今年2月到現在，我已經打了50多針封閉。但能站上奧運賽場，所有的付出都是值得的。

石智勇進行扎針治療

針灸針裝滿了飲料桶

這場比賽我在抓舉建立起了10公斤的優(yōu)勢，算是夢幻開局。考慮到對手的挺舉實力以及沖金是唯一目標，我決定將開把重量確定在191公斤，逼迫對手必須舉起202公斤才能贏我。但是第一把試舉時上挺環(huán)節(jié)腰還是有點軟，沒能成功，連續(xù)試舉也讓我力竭，第三把試舉時我確實拼盡了全力，我翻起杠鈴之后聽到左腿內收肌“啪”地響了一聲，經過檢查，我的內收肌確實斷裂了。

拼過就不后悔，這場比賽對我來說是失敗的，但備戰(zhàn)奧運會的整個過程是成功的，我依然為自己驕傲。

我也看到大家的暖心留言了，真的很感動。競技體育很殘酷，但你們的支持和理解給了我力量。我已經練了21年舉重，舉重帶給我榮耀和幸福，為國爭光永遠是我向前的動力。

感謝中國舉重隊對我的信任和支持，為我提供了最完備的保障。雖然我沒能實現奧運三連冠，但是我的隊友們還將繼續(xù)為中國體育代表團爭奪榮譽。無論面對什么困難，中國舉重隊永遠頑強拼搏、挑戰(zhàn)極限、超越自己，永不放棄！希望大家繼續(xù)支持中國舉重隊！

轉自：人民日報客戶端

來源：浙江新聞

近在開發(fā)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，具體看個人需求是否添加吧。

們的真機操作頁面實際很復雜

（業(yè)界良心功能配置，好不好！）

分為手機區(qū)域(1)、操作區(qū)域(2) 、log顯示

并且，還存在橫屏與豎屏的狀態(tài)

上述3個區(qū)域的位置與大小是不一致的

此外，整個操作頁面還根據瀏覽器窗口大小自適應（如下圖）

并且還考慮了手機分辨率的不同，正常為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>操作區(qū)域</div>
 </div>
 <div class="log">log區(qū)域</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>操作區(qū)域</div>
 </div>
 <div class="log">log區(qū)域</div>
 <div class="rect"></div>
 </div>
</div>

豎屏狀態(tài)就收工了，并且各區(qū)域會根據窗口大小自由伸縮。
那么橫屏狀態(tài)呢？先上圖片

代碼：

<!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>操作區(qū)域</span>
 </div>
 <div class="log">
 <span>log區(qū)域</span>
 </div>
 <div class="rect"></div>
 </div>
</div>
</body>
</html>