响应式页面
概念:
响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。
用到的技术:
- 多使用 max-width、min-width,不写死宽度;
- 使用 media 查询来响应不同分辨率;
- 使用动态 REM 方案保证手机端的显示效果;
- 响应式图片;
- 字体最好不要用绝对大小 (px),而使用相对大小 (em)
相比自适应页面:
自适应页面(流体布局、fluid layout)指的是页面宽度不固定。跟响应式页面没有什么关系。
- 自适应页面强调 “不写死宽度 ”;响应式页面强调 “ 响应 ”。
- 自适应页面可以是响应式的,也可以不是响应式的。
- 响应式页面可以是自适应的,也可以是不自适应的(也就是定宽的)。
响应式的概念应该覆盖了自适应,而且涵盖的内容更多。
自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。手机的屏幕比较小,宽度通常在600像素以下,pc的像素一般在1000像素以上,部分配置高的笔记本在2000像素以上的也有,同样的页面要显示在不同的设备上面,还要呈现出满意的效果,不是一件容易的事情。因此就有人想出了一个办法,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕的宽度,自动调节网页的内容大小,但是无论怎么样子,他们的主体的内容和布局是没有变化的。
而响应式布局是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。两种的方式的解决问题是不一样的。
本文来自博客园,作者:辉太狼`,转载请注明原文链接:https://www.cnblogs.com/HuiTaiLang1216/p/15394831.html