码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-03-11 19:17:07      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:bsp   宽度   页面   积累   多少   rem   url   范围   视频   

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

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

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

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

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

响应式优缺点:

   优:

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

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

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

   缺:

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

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

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

标签:bsp   宽度   页面   积累   多少   rem   url   范围   视频   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!