web網(wǎng)頁課程設計報告 自適應網(wǎng)頁設計和響應式網(wǎng)頁設計有什么區(qū)別?
自適應網(wǎng)頁設計和響應式網(wǎng)頁設計有什么區(qū)別?自適應是指網(wǎng)頁在網(wǎng)站上,在其他設備上瀏覽,只是顯示更加友好(原來網(wǎng)頁的布局可以在任何設備上保持一致,不影響視覺效果(不會被阻擋)和響應效果,因為屏幕的大小又窄
自適應網(wǎng)頁設計和響應式網(wǎng)頁設計有什么區(qū)別?
自適應是指網(wǎng)頁在網(wǎng)站上,在其他設備上瀏覽,只是顯示更加友好(原來網(wǎng)頁的布局可以在任何設備上保持一致,不影響視覺效果(不會被阻擋)和響應效果,因為屏幕的大小又窄又寬)。響應式是指網(wǎng)站上的頁面,由于響應式布局,它也可以在任何設備上顯示,但網(wǎng)頁的樣式已經(jīng)根據(jù)響應式布局更改為其他設備的樣式。結論:自適應,在移動設備上瀏覽,網(wǎng)頁與PC沒有區(qū)別,所有內(nèi)容都在瀏覽器窗口中,不會顯示需要手動放大、拖動瀏覽的“原始網(wǎng)頁”。響應速度快,在手機和其他設備上瀏覽,網(wǎng)頁與PC內(nèi)容類似,但手機和其他設備的布局會自動更改。
網(wǎng)頁設計中,如何讓頁面自適應手機端?
一般來說,通過CSS3,您可以直接定義不同分辨率的樣式,如下面的代碼。
/*桌面*/@媒體全部和(最小寬度:1201px){。標題桌面{顯示:阻止!重要}。容器{寬度:1100px}/*筆記本電腦*/@media all和(最小寬度:980px)和(最大寬度:1200px){。標題{顯示:阻止!重要}。Container{width:920px}
但是,上面的方法可能與舊版IE不兼容
所以你也可以通過JS來識別當前頁面的分辨率,給出更好更復雜的樣式。有很多代碼,但通常沒有兼容性問題。