CSS3怎么讓PC及移動端頁面適配

這篇“CSS3怎么讓PC及移動端頁面適配”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“CSS3怎么讓PC及移動端頁面適配”文章吧。

　　移動端頁面和PC端頁面區別在我看來就是屏幕的寬度和高度不同，頁面中內容在不同的寬度和高度中所占的比例也是不同的。移動端沒有hover事件，移動端也沒有touch事件，這就是我現在對于移動端頁面和PC頁面區別。除了這些以外，所需要用到的CSS、HTML和JavaScript的只是都是差不多的。

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

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

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

以上就是關于“CSS3怎么讓PC及移動端頁面適配”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。