html頁(yè)面自適應(yīng) 網(wǎng)頁(yè)設(shè)計(jì)中,如何讓頁(yè)面自適應(yīng)手機(jī)端?
網(wǎng)頁(yè)設(shè)計(jì)中,如何讓頁(yè)面自適應(yīng)手機(jī)端?一般來(lái)說(shuō),通過(guò)CSS3,您可以直接定義不同分辨率的樣式,例如下面的代碼。/*桌面*/@媒體全部和(最小寬度:1201px){。標(biāo)題桌面{顯示:阻止!重要}。容器{寬
網(wǎng)頁(yè)設(shè)計(jì)中,如何讓頁(yè)面自適應(yīng)手機(jī)端?
一般來(lái)說(shuō),通過(guò)CSS3,您可以直接定義不同分辨率的樣式,例如下面的代碼。
/*桌面*/@媒體全部和(最小寬度:1201px){。標(biāo)題桌面{顯示:阻止!重要}。容器{寬度:1100px}/*筆記本電腦*/@media all和(最小寬度:980px)和(最大寬度:1200px){。標(biāo)題{顯示:阻止!重要}。Container{width:920px}
但是,上面的方法可能與舊版IE不兼容
所以你也可以通過(guò)JS來(lái)識(shí)別當(dāng)前頁(yè)面的分辨率,給出更好更復(fù)雜的樣式。有很多代碼,但通常沒(méi)有兼容性問(wèn)題。
使用自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)有好處?
隨著移動(dòng)互聯(lián)網(wǎng)的普及,為了解決不同移動(dòng)設(shè)備瀏覽器分辨率和顯示效果不一的問(wèn)題,設(shè)計(jì)人員提出了響應(yīng)式布局(即自適應(yīng)布局)的設(shè)計(jì)方案。簡(jiǎn)而言之,一個(gè)網(wǎng)站可以兼容多個(gè)終端,而不是為每個(gè)終端制作一個(gè)特定的版本。這個(gè)概念的誕生就是為了解決移動(dòng)互聯(lián)網(wǎng)的瀏覽問(wèn)題。適應(yīng)性網(wǎng)站設(shè)計(jì)的優(yōu)點(diǎn)有:1??伸`活面對(duì)不同分辨率的設(shè)備。能夠快速解決多設(shè)備顯示適配問(wèn)題。易于維護(hù),可由一個(gè)后臺(tái)管理。它可以實(shí)現(xiàn)更酷的功能;當(dāng)然,它也有它的缺點(diǎn):1。與各種設(shè)備兼容,工作量大。代碼繁瑣,會(huì)隱藏?zé)o用的元素,加載時(shí)間會(huì)延長(zhǎng);3事實(shí)上,這是一種折衷的設(shè)計(jì)方案,受諸多因素影響,無(wú)法達(dá)到最佳效果。一般來(lái)說(shuō),利大于弊。適應(yīng)性網(wǎng)站設(shè)計(jì)是未來(lái)的發(fā)展趨勢(shì)。
自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)和響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)有什么區(qū)別?
自適應(yīng)是指網(wǎng)頁(yè)在網(wǎng)站上,在其他設(shè)備上瀏覽,只是顯示更加友好(原始網(wǎng)頁(yè)的布局可以在任何設(shè)備上保持一致,不影響視覺(jué)效果(不會(huì)被阻擋)和響應(yīng)效果,因?yàn)槠聊坏拇笮∮终謱挘?。響?yīng)式指的是網(wǎng)站上的頁(yè)面,由于響應(yīng)式布局,它也可以在任何設(shè)備上顯示它有無(wú)障礙顯示,但網(wǎng)頁(yè)的樣式早就變成了根據(jù)響應(yīng)式布局專(zhuān)門(mén)為其他設(shè)備準(zhǔn)備的樣式。結(jié)論:自適應(yīng),在移動(dòng)設(shè)備上瀏覽,網(wǎng)頁(yè)與PC沒(méi)有區(qū)別,所有內(nèi)容都在瀏覽器窗口中,不會(huì)顯示需要手動(dòng)放大、拖動(dòng)瀏覽的“原始網(wǎng)頁(yè)”。響應(yīng)速度快,在手機(jī)和其他設(shè)備上瀏覽,網(wǎng)頁(yè)與PC內(nèi)容類(lèi)似,但手機(jī)和其他設(shè)備的布局會(huì)自動(dòng)更改。