響應式和自適應的區別?
自適應:
在不同分辨率下不同設備上顯示相同的頁面。即:根據屏幕的寬度,自動調節網頁內容的大小,使其主體內容和布局不變。
響應式:
響應式的概念應該是覆蓋了自適應,但是包括的東西更多了。響應式布局可以根據屏幕的大小自動的調整頁面的展現方式,以及布局。
(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文件。