自適應和響應式區別以及寫法


自適應:

 在不同分辨率下不同設備上顯示相同的頁面。即:根據屏幕的寬度,自動調節網頁內容的大小,使其主體內容和布局不變。

響應式:

響應式的概念應該是覆蓋了自適應,但是包括的東西更多了。響應式布局可以根據屏幕的大小自動的調整頁面的展現方式,以及布局。

(1)允許網頁的寬度自動的調整

(2)盡量少使用絕對的寬度,多點百分比

(3)相對大小的字體:字體不要使用px寫死,最好使用相對大小的em,或者高清方案rem,這個不限制與字體,別的屬性也可以這么設置

(4)流式布局,float等float的好處是,如果寬度太小,放不下兩個元素,后面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢出),避免了水平滾動條的出現。

(5)選擇加載css,<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />,這個意思是如果屏幕寬度小於400像素(max-device-width: 400px),就加載tinyScreen.css文件。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM