CSS0 -- 静态、自适应、流式、响应式

静态布局:页面的宽高是固定的,超出页面的内容用户手动拖拽。手机端的话,另外设计一套。

自适应布局:用媒体查询(@media)根据不同屏幕定义不同的宽高,比静态布局少了用户手动拖拽的几率。

(因为媒体查询范围不能做到无穷的刚刚符合各个屏幕,页面内容不多不少的和屏幕大小一样,不用到拖拽)

流式布局:页面的宽度用百分比来分配,屏幕度数跨度太大页面整体浏览效果不好,用户体验差(跨度可以说是从pc到手机)

响应式布局:是用了自适应的媒体查询 和 流式布局的百分比相结合。(图片、视频用百分比。字体用rem或em)

响应式优缺点:

   优:

  灵活性:面对不同分辨率设备灵活性强

  节省成本:不需要开发pc端和移动端两套页面

  SEO友好:pc端和移动端的公用一套页面积累url用户访问和分享

   缺:

  对老IE的不兼容:不支持媒体查询

  浏览速度慢:兼容不同的分辨率设备,样式随之也会增多

以妓会友,评赞走起

原文地址:https://www.cnblogs.com/lgyong/p/8544938.html