那天听到一个问题,关于响应式与自适应真是傻傻分不清楚
自适应相当于响应式的一个子集
自适应,自动识别屏幕宽度、并做出相应调整的网页设计。可以理解成不同的终端显示同样的页面
自适应的核心:1. 允许用户调整网页的大小<meta name="viewport" content="width=device-width, initial-scale=1" />
2. 尽量避免使用固定宽度利用%,比例来代替
3. 相对大小字体,尽量使用相对大小(em)。
4. 流动布局,设置浮动,宽度太小,放不下两个元素,避免出现水平的滚动条
5. 媒体查询,根据不同的页面大小决定显示的内容
6. 图片自适应,给图片设置%
响应式:由于自适应在小屏幕和大屏幕显示的内容一样只是缩小了而已于是就出现了响应式,使一个网站能够兼容多个终端,根据终端的不同对页面的内容和布局进行调整
简言之:自适应是为了解决如何才能在不同大小的设备上呈现同样的网页,而响应式是根据设备的不同,网页的内容也会进行调整
浙公网安备 33010602011771号