淺談pc和移動(dòng)端的響應(yīng)式

番茄西紅柿發(fā)布于2019-04-23 11:56 / 2750人閱讀

摘要：響應(yīng)式布局等于流動(dòng)網(wǎng)格布局，而自適應(yīng)布局等于使用固定分割點(diǎn)來(lái)進(jìn)行布局。如下圖所示，對(duì)于同一個(gè)頁(yè)面圖中的，如果用響應(yīng)式布局來(lái)處理的話，用不同設(shè)備電腦平板手機(jī)去訪問(wèn)此頁(yè)面，最后看到的布局和內(nèi)容有很大不同。

身為一個(gè)前端攻城獅，是不是經(jīng)常遇到各種各樣的響應(yīng)式問(wèn)題？下面我們來(lái)說(shuō)一下：

1.響應(yīng)式跟自適應(yīng)有什么區(qū)別?

有些人可能還不知道響應(yīng)式跟自適應(yīng)的區(qū)別,甚至認(rèn)為他們是同一個(gè)東西,其實(shí)不是的.

自適應(yīng)是最早出現(xiàn)的，后面才有了響應(yīng)式。響應(yīng)式布局等于流動(dòng)網(wǎng)格布局，而自適應(yīng)布局等于使用固定分割點(diǎn)來(lái)進(jìn)行布局。

如下圖所示，對(duì)于同一個(gè)頁(yè)面（圖中的Html），如果用響應(yīng)式布局來(lái)處理的話，用不同設(shè)備（電腦、平板、手機(jī)）去訪問(wèn)此頁(yè)面，最后看到的布局和內(nèi)容有很大不同。

而如果用自適應(yīng)布局去處理的話，那不管訪問(wèn)設(shè)備如何的不同（下圖是三臺(tái)尺寸不一樣的手機(jī)），最后看到的頁(yè)面內(nèi)容和布局基本上還是一樣的，就是尺寸略有不同。

響應(yīng)式網(wǎng)站：https://www.microsoft.com/zh-cn/

自適應(yīng)網(wǎng)站：http://m.ctrip.com/html5/

2.實(shí)現(xiàn)響應(yīng)式有哪幾種方式?

1.使用媒體查詢(Media Query) 結(jié)合 rem字體

記住,先在標(biāo)簽里加入這個(gè)meta標(biāo)簽(設(shè)置設(shè)備按照一比一的尺寸進(jìn)行顯示，并且禁止用戶縮放頁(yè)面):

其次是媒體查詢，這個(gè)大家應(yīng)該都知道，這個(gè)是響應(yīng)式最重要的部分。

如果大于1000px，就用：

@media screen and (min-width:1000px){...}              對(duì)應(yīng)PC端頁(yè)面

如果在小于1000px和大于768px之間：

@media screen and (max-width:1000px) and (min-width:768px) {...}        對(duì)應(yīng)平板端頁(yè)面

如果小于768px：

@media screen and (max-width:768px){...}           對(duì)應(yīng)手機(jī)端頁(yè)面

然后是rem字體，rem是css3新出的單位，是指相對(duì)于根元素的字體大小的單位。一般設(shè)置在html,body，結(jié)合媒體查詢我們可以這樣寫：

@media screen and (min-width:1000px){
　　html,body{
　　　font-size:14px;
　　}
}  
    
@media screen and (max-width:1000px) and (min-width:768px){
　　html,body{
　　　font-size:13px;
　　}
}  

@media screen and (max-width:768px){
　　html,body{
　　　font-size:12px;
　　}
}

然后在樣式表里面,把px單位都轉(zhuǎn)換為rem,這樣rem就會(huì)根據(jù)我們?cè)趆tml,body設(shè)置的字體單位進(jìn)行自動(dòng)縮放的過(guò)程.

至于1px等于多少rem呢,我習(xí)慣是100px等于1rem,這樣做的好處有兩點(diǎn):

第一,谷歌瀏覽器的默認(rèn)字體是12px,小于就失效,如果1rem等于10px的話是沒(méi)有任何效果的.第二,容易換算,例如我們15px的話,就寫0.15rem.

當(dāng)然還有幾種比較方便的,如果你有使用webpack的話,可以使用postcss-pxtorem或者px2rem-loader,它們會(huì)把你寫的樣式打包的時(shí)候自動(dòng)轉(zhuǎn)換為rem,具體網(wǎng)上有教程.

轉(zhuǎn)換前:

轉(zhuǎn)換后:

還有一種就是使用sublime text的插件,cssrem神器!在你輸入的時(shí)候就自動(dòng)轉(zhuǎn)換了.

這里介紹一種用js自動(dòng)計(jì)算rem的方法,可以不用到媒體查詢:

// 基準(zhǔn)大小 相當(dāng)于窗口縮放到設(shè)計(jì)稿的尺寸時(shí)body的字體大小 這里設(shè)置100px 方便計(jì)算
  const baseSize = 100
  // 設(shè)置 rem 函數(shù)
  function setRem() {
    // 當(dāng)前頁(yè)面寬度相對(duì)于1280寬的縮放比例，可根據(jù)自己需要修改。1280是設(shè)計(jì)稿的寬度
    const scale = document.documentElement.clientWidth / 1280;
    let autoWidth = Math.round((baseSize * Math.min(scale, 2)));
    //判斷頁(yè)面縮放到小于99px的字體時(shí) 就不再縮小 防止內(nèi)容溢出
    if (Math.round((baseSize * Math.min(scale, 2))) <= 99) {
      autoWidth = 99;
    }
    // 設(shè)置頁(yè)面根節(jié)點(diǎn)字體大小
    document.documentElement.style.fontSize = autoWidth + px
  }
  // 初始化
  setRem()
  // 改變窗口大小時(shí)重新設(shè)置 rem
  window.onresize = function () {
    setRem()
  }

這樣只要把樣式表的px單位都轉(zhuǎn)換為rem即可.

2.使用插件(bootstrap)

柵格化布局，本例利用bootstarp的柵格系統(tǒng)

根據(jù)上圖可以看到,只要在class加上bootstrap獨(dú)有的Class前綴,就可以使用bootstrap了,當(dāng)然你得先引入bootstrap的插件.示例:

這段代碼的意思是在小于768px的尺寸下,這個(gè)div是占用一半的位置的,而在>=768px且<992px直接,這個(gè)div只占三分之一的位置.

這樣就可以根據(jù)不同的屏幕尺寸來(lái)達(dá)到響應(yīng)式效果.

3.使用彈性布局(flex)

由于彈性布局涉及的知識(shí)點(diǎn)比較多,后續(xù)會(huì)更~

ps:如果大家想了解一些前端界的最新知識(shí)或者技術(shù),公眾號(hào)"前端快訊"每天會(huì)為你推送最新的知識(shí)點(diǎn)!

可以通過(guò)掃下面的二維碼就可以了，謝謝關(guān)注^_^

GPU云服務(wù)器云服務(wù)器響應(yīng)式響應(yīng)式布局響應(yīng)式網(wǎng)站響應(yīng)式設(shè)計(jì)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1381.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 736·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3981·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問(wèn)題 lib/native/libhadoop.so which mi

閱讀 3807·2021-11-30 14:52
VmShell：黑五美國(guó)VPS,免費(fèi)先開通測(cè)試,滿意后付款!支持tiktok美區(qū)

閱讀 3871·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3802·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3904·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3580·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過(guò)多的解決方法

閱讀 6183·2021-11-29 11:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

淺談pc和移動(dòng)端的響應(yīng)式

相關(guān)文章