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

創(chuàng)新互聯(lián)建站主要從事網(wǎng)站制作、成都做網(wǎng)站、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)思明,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

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

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

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

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

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

分享題目：CSS3怎么讓PC及移動(dòng)端頁面適配
瀏覽地址：http://jinyejixie.com/article34/ieppse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、商城網(wǎng)站、關(guān)鍵詞優(yōu)化、電子商務(wù)、定制開發(fā)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)