CSS3怎么讓PC及移動(dòng)端頁(yè)面適配

這篇“CSS3怎么讓PC及移動(dòng)端頁(yè)面適配”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“CSS3怎么讓PC及移動(dòng)端頁(yè)面適配”文章吧。

　　移動(dòng)端頁(yè)面和PC端頁(yè)面區(qū)別在我看來(lái)就是屏幕的寬度和高度不同，頁(yè)面中內(nèi)容在不同的寬度和高度中所占的比例也是不同的。移動(dòng)端沒有hover事件，移動(dòng)端也沒有touch事件，這就是我現(xiàn)在對(duì)于移動(dòng)端頁(yè)面和PC頁(yè)面區(qū)別。除了這些以外，所需要用到的CSS、HTML和JavaScript的只是都是差不多的。

　　1.在標(biāo)簽中加入。viewport就是視口，也就是瀏覽器所顯示的屏幕區(qū)域，你用chrome瀏覽器模擬所有的手機(jī)用取得的寬度都是980px。也就是當(dāng)你用手機(jī)看頁(yè)面的時(shí)候看到的都是縮放的頁(yè)面，手機(jī)屏幕的寬度來(lái)模擬980px將頁(yè)面進(jìn)行縮放。如果你專門的適應(yīng)手機(jī)的屏幕做了一個(gè)頁(yè)面，并不想讓手機(jī)進(jìn)行縮放，就可以在標(biāo)簽中加入這樣就可以不縮放頁(yè)面進(jìn)行顯示。這個(gè)標(biāo)簽的意思就是viewport的寬度就是設(shè)備的寬度，不進(jìn)行縮放，初始的縮放值是1，最大縮放值也是1，最小縮放值也是1。這樣你再用所取得的寬度就是設(shè)備自生的寬度。所以做移動(dòng)端的頁(yè)面加上這個(gè)meta標(biāo)簽是必須的。

　　2.使用媒體查詢：，這行代碼表示只有在滿足屏幕寬度位0-375px的時(shí)候{}中的css樣式才會(huì)生效的。，如果是要滿足多個(gè)條件的時(shí)候中間就要使用and連接起來(lái)。利用這個(gè)就可以做出來(lái)響應(yīng)式頁(yè)面，當(dāng)屏幕的寬度不同的時(shí)候展現(xiàn)出來(lái)的頁(yè)面也就不同。但是這樣你就必須謝多個(gè)不同的css文檔來(lái)滿足不同寬度的設(shè)備。也可以使用link標(biāo)簽在標(biāo)簽中加上，例如：，這樣只有在屏幕寬度在375px才會(huì)生效。

　　3.使用媒體查詢需要在不同的寬度下寫出不同的css樣式，這樣的線的有點(diǎn)繁瑣。還有一種移動(dòng)端的布局就是使用動(dòng)態(tài)的rem來(lái)進(jìn)行布局，這樣可以使得在你的設(shè)備的寬度發(fā)生變化的時(shí)候，頁(yè)面的樣式也會(huì)隨這設(shè)備的寬度變化而發(fā)生變化。rem指的就是root font-size根元素的字體大小，也就是html元素的字體的大小。在標(biāo)簽中加上以下代碼這樣就可以使得rem的大小等于屏幕的寬度。計(jì)算出頁(yè)面中的每部分在這個(gè)屏幕寬度中所占的比例，單位使用rem，這樣在你屏幕的寬度發(fā)生變化的時(shí)候頁(yè)面的內(nèi)容也會(huì)發(fā)生相應(yīng)的變化，而不會(huì)在頁(yè)面寬度發(fā)生變化的時(shí)候頁(yè)面中內(nèi)容的寬度會(huì)發(fā)生變形。但是不是都必須使用rem來(lái)做單位，其他的px等也可以來(lái)使用。

以上就是關(guān)于“CSS3怎么讓PC及移動(dòng)端頁(yè)面適配”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。