在開發手機端網站時，雖然 HTML5 的語義化標簽和響應式設計讓我們在移動設備上獲得了很好的體驗，但有時候我們需要將這些代碼移植到 PC 端網站上。

@media screen and (max-width:600px) {
/* 手機端樣式 */
body {
background-color: #FFF;
font-size: 16px;
line-height: 1.4em;
}
.container {
width: 100%;
padding: 20px;
}
.header {
background-color: #333;
color: #FFF;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
}
.header h1 {
font-size: 24px;
text-align: center;
}
/* ... ... */
}
@media screen and (min-width:601px) {
/* PC端樣式 */
body {
background-color: #F5F5F5;
font-size: 18px;
line-height: 1.8em;
}
.container {
width: 80%;
max-width: 1200px;
margin: 0 auto;
padding: 40px;
}
.header {
background-color: #FFF;
color: #333;
height: 120px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #CCC;
}
.header h1 {
font-size: 36px;
text-align: left;
margin-left: 40px;
}
/* ... ... */
}

根據屏幕的寬度，我們可以使用 CSS3 的媒體查詢語句來實現不同設備下不同的樣式。在上面的代碼中，我們設置了max-width: 600px表示屏幕寬度小于等于 600px 時為手機端樣式，設置了min-width: 601px表示屏幕寬度大于 601px 時為 PC 端樣式。

在手機端樣式中，我們將.container元素寬度設置為 100%，以充分利用手機上的屏幕空間，同時將字體和行高設置為適合移動設備的大小和間距。

在 PC 端樣式中，我們將.container元素寬度設置為 80% ，并使用max-width: 1200px來限制最大寬度。我們將容器居中，使用margin: 0 auto;，并增加了邊距。此外，我們還根據設計增加了導航欄、側邊欄等元素。

在轉換代碼時，我們需要將像素（px）單位轉換為百分比（%）單位，以適應各種屏幕的大小。如果同時使用了像素和百分比單位，可以根據兩者之間的比例來轉換。

總的來說，移植 HTML5 代碼到 PC 端網站需要考慮到不同設備的屏幕大小和樣式需求。通過設置媒體查詢語句和使用正確的 CSS 單位，我們可以很好地實現這一轉換。