前言

春招真的是太卷了，讓我懷疑春招到底在招誰（是我太菜惹qaq）?？傊€是不能松懈下來，總結(jié)一下在實(shí)習(xí)期間遇到的h5的響應(yīng)式布局、PC和移動端適配方案的選擇以及一些問題。本文部分文案由chat-gpt編寫，例如介紹響應(yīng)式布局的文案（才不是因?yàn)槲覒衺）。

響應(yīng)式布局

響應(yīng)式布局是指在不同的設(shè)備或屏幕大小下，網(wǎng)頁能夠自動適配并呈現(xiàn)出最佳的視覺效果和用戶體驗(yàn)。這是一種以屏幕大小和設(shè)備特性為基礎(chǔ)的設(shè)計方法，旨在確保網(wǎng)站能夠在各種不同設(shè)備上都能夠完美呈現(xiàn)。這樣，無論是在大屏幕電腦、筆記本電腦、平板電腦還是手機(jī)上訪問網(wǎng)站都能夠得到良好的體驗(yàn)。
總結(jié)了一下，網(wǎng)上目前有以下幾種方案：

1. 媒體查詢
2. flex布局
3. rem
4. 百分比
5. vw/vh
6. 移動端 viewport
7. 開發(fā)PC端和移動端兩套頁面

在實(shí)習(xí)的時候我做過兩個項(xiàng)目，是使用了媒體查詢和rem的，效果還可以，我會著重介紹這兩個方案。

@media媒體查詢

關(guān)于媒體查詢的詳細(xì)介紹和使用方法：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries
講大白話就是在符合條件的情況下，特定的樣式會生效，下面是一個例子：

.test {
	width: 80px;
	height: 80px;
	background: #ccc;
}
@media screen and (min-width:600px){
	.test {
		width: 100px;
		height: 100px;
	}
}

這個效果就是在屏幕寬度小于600px的時候，test類中的高度和寬度都是80px，而在大于等于600px的時候變成了100px，注意這里背景顏色還是原來的灰色，樣式只是疊加了，并不是直接替換掉。
看到這里你應(yīng)該就懂了，電腦、平板和手機(jī)各寫一套不就行了，確實(shí)如此，這么做可以滿足大部分的用戶。
但也有許多問題，比如寫三套就夠折磨人了，而且由于市面上手機(jī)、電腦和平板屏幕寬度都不太一樣，寫三套只能滿足大部分的用戶，一些用戶屏幕尺寸比較刁鉆的（例如尺寸在手機(jī)和平板分割點(diǎn)邊緣的），顯示的效果就不是很好了。

flex布局

flex布局是一種CSS 3的新的布局方式，可以輕松的實(shí)現(xiàn)彈性布局。它的主要思想是通過容器和子項(xiàng)之間的關(guān)系來實(shí)現(xiàn)網(wǎng)頁布局。和傳統(tǒng)的布局方式相比，flex布局有很多優(yōu)點(diǎn)，比如可以快速設(shè)置元素的大小、位置、對齊等屬性，還可以自適應(yīng)不同尺寸的屏幕和設(shè)備，從而實(shí)現(xiàn)更好的響應(yīng)式布局。

使用flex布局，需要對容器設(shè)置display: flex屬性。
然后使用flex-direction屬性來設(shè)置子項(xiàng)的方向（水平或垂直）。flex-wrap屬性則用于控制子項(xiàng)是否可以換行，align-items屬性用于控制子項(xiàng)在交叉軸上的對齊方式，justify-content屬性用于控制子項(xiàng)在主軸上的對齊方式。通過這些屬性的設(shè)置，我們可以輕松的實(shí)現(xiàn)各種布局效果，同時也可以在響應(yīng)式布局中實(shí)現(xiàn)更好的適應(yīng)性。

個人感覺flex布局比較適合一些頁面比較簡單的頁面，在PC和移動端都有不錯的體驗(yàn)。

rem

rem布局是一種響應(yīng)式布局方式，用于將屏幕尺寸和設(shè)備DPI等因素考慮在內(nèi)，讓頁面能夠在不同的設(shè)備上自適應(yīng)調(diào)整布局，在各種尺寸和密度的屏幕上呈現(xiàn)出更好的視覺體驗(yàn)，主要用在移動端上面。

rem是根據(jù)根元素（也就是html標(biāo)簽）上的font-size來決定的，例如默認(rèn)html的font-size為16px，那么1rem就相當(dāng)于16px，也就是倍數(shù)的關(guān)系。那么當(dāng)屏幕寬度不一樣的時候，我們就需要動態(tài)修改html上的font-size來達(dá)到設(shè)配的效果。

動態(tài)修改有幾種方案，第一種是通過媒體查詢來修改：

@media screen and (min-width: 320px) {
  html {
    font-size: 21.33333333px;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 24px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 25px;
  }
}
@media screen and (min-width: 384px) {
  html {
    font-size: 25.6px;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 26.66666667px;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 27.6px;
  }
}
@media screen and (min-width: 424px) {
  html {
    font-size: 28.26666667px;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 32px;
  }
}
@media screen and (min-width: 540px) {
  html {
    font-size: 36px;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 48px;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 50px;
  }

還有一種方法是通過js來動態(tài)修改：

function remSize(){
  var deviceWidth = document.documentElement.clientWidth || window.innerWidth; //兼容多瀏覽器

  //限制寬度
  if(deviceWidth >= 750){
    deviceWidth = 750
  }
  if(deviceWidth <= 320){
    deviceWidth = 320
  }

  /*
  為什么除以7.5呢？是因?yàn)榻Y(jié)果比較好計算，這也是可以根據(jù)設(shè)計稿的寬度來決定的。
  例如設(shè)計稿寬度是750px，那么將html的font-size設(shè)置成750/7.5=100px，那么1rem就相當(dāng)于100px。當(dāng)屏幕寬度不同的時候，也可以達(dá)到自適應(yīng)的效果。
  */
  document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'
  document.querySelector('body').style.fontSize = 0.16 + 'rem' //相當(dāng)于16px
}
remSize()
//調(diào)整窗口大小時調(diào)用函數(shù)
window.onresize = ()=> remSize()

通過以上操作，在css文件中就可以使用rem單位了，在不同的環(huán)境下也都有著不錯的效果和體驗(yàn)。
當(dāng)然自己手寫的還是比較粗糙，現(xiàn)在比較成熟和流行的方案有淘寶的flexible.js，我們可以下載源碼到自己的項(xiàng)目里面使用，原理和上面例子差不多，這里就不過多贅述。

如果你還是想用px，懶得自己計算rem，那也可以通過插件來解決，例如在vue項(xiàng)目中，通過安裝postcss-px2rem這個插件，然后在vue.config.js中設(shè)置參數(shù)就可以了：

module.exports = {
  // 適配
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 75// 1rem為75px，意思是在750的設(shè)計稿下，把屏幕切成10份，那么一份就是75了。那么在其他寬度的設(shè)計稿下也是按照這個比率來計算，達(dá)到適配。
          })
        ]
      }
    }
  },
  ...
 }

然后在css文件中你就可以繼續(xù)愉快的使用px了。
但這個方法也存在著缺陷，例如項(xiàng)目中某些樣式是通過實(shí)時計算的px值得到的，這些值就不能換算成rem了。

百分比

就如同字面一樣，用百分比來設(shè)置高度，寬度，margin和padding等屬性。但缺點(diǎn)在于他們參考的元素并不是統(tǒng)一的。例如width和height會參考父元素的width和height，但margin和padding參考的是父元素的width，而圓角百分比是參考自身的，因?yàn)檫@些原因很可能出現(xiàn)問題，所以不推薦單獨(dú)使用。

移動端 viewport

Viewport（視口）是一個設(shè)備獨(dú)立像素的抽象概念，它是瀏覽器上下文中的一個可視化區(qū)域。Viewport 的大小隨著設(shè)備的屏幕大小而變化，而且無法通過 JavaScript 直接獲取其準(zhǔn)確值。Viewport在響應(yīng)式網(wǎng)頁設(shè)計方案中非常重要，在移動設(shè)備上尤為關(guān)鍵，因?yàn)橐苿釉O(shè)備通常會有不同大小的屏幕。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
width=device-width: 自適應(yīng)手機(jī)屏幕的尺寸寬度
maximum-scale: 縮放比例的最大值
minimum-scale: 縮放比例的最小值
inital-scale: 縮放的初始化
user-scalable: 用戶是否能縮放頁面

vw/vh

使用vw和vh適配是一種比較新的響應(yīng)式布局技術(shù)，用于自適應(yīng)不同尺寸屏幕和設(shè)備。vw和vh是視窗寬度和高度的相對單位，使用vw和vh單位可以使元素在不同尺寸的屏幕上自適應(yīng)調(diào)整大小和位置，從而實(shí)現(xiàn)更好的布局效果。

使用viewport meta標(biāo)簽在HTML文件中設(shè)置視口：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

使用vw單位代替固定值的寬度，例如：width: 50vw;
使用vh單位代替固定值的高度，在實(shí)際應(yīng)用中可結(jié)合媒體查詢等技術(shù)進(jìn)行適配，例如：

height: 50vh;
@media (max-width: 768px) {
  height: 100vh;
}

需要注意的是，由于視窗的寬高比例可能與實(shí)際屏幕比例不一致，因此在設(shè)置元素大小和位置時，最好使用相對定位和百分比來實(shí)現(xiàn)。此外，vw和vh單位在一些低版本瀏覽器中可能無法支持，需要進(jìn)行兼容處理。

開發(fā)PC端和移動端兩套頁面

如果PC和移動端的頁面差異太大的話，也是可以選擇開發(fā)兩套頁面的。

總結(jié)

總之，個人感覺沒有完美的適配方案，只能根據(jù)自己的需求來選擇，盡量達(dá)到理想的狀態(tài)。也不一定只選擇一種方案，可以結(jié)合多種方案來實(shí)現(xiàn)效果。

如果上述內(nèi)容有任何問題，歡迎留言討論。
參考鏈接：https://blog.csdn.net/LOxia/article/details/123723334
https://juejin.cn/post/7035540378811891749文章來源地址http://www.zghlxwxcb.cn/news/detail-446322.html

到了這里，關(guān)于h5響應(yīng)式布局、PC和移動端適配方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！