这篇文章主要介绍了白话分析自适应跟响应式的区别详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

根据日常开发及网上相关资料,用简单通俗易懂的大白话分析 自适应响应式 的区别。 注: 本文只分析自适应跟响应式的区别以及了解其由来的背景,不在于讨论其使用的方法

一、什么是自适应布局

自适应布局就是宽度自适用布局,在不同大小的设备上,网页以等比例的形式缩放宽度,呈现同样的主体内容和排版布局

自适应布局演示图:

随着屏幕宽度缩放,网页内容也以等比例缩放,不管屏幕宽度为多少,网页主体排版布局总是一样的

二、什么是响应式布局

响应式布局就是根据屏幕大小变化,页面的内容排版布局会自动调整变动,已呈现更好的用户体验

响应式布局演示图:

随着屏幕宽度的缩放,页面做出相应调整,布局和展示的内容会有所变动

1.自适应布局出现的背景

在PC时代初期,网页设计者都会设计固定宽度的页面,最开始的电脑显示器分辨率种类不多,因为当时电脑本来就少。后来随着显示器种类越来越多,以及笔记本、平板电脑的普及,这种固定宽度的页面出现了问题。于是出现了一种新的布局方式,宽度自适应布局。我们平时谈论的自适应布局,大多指的就是宽度自适应布局

再到后来,互联网大战从PC打到了手机,还有 HTML5 标准的发布。自适应布局也从PC延伸到手机,自适应布局也因此火了起来,成为网页设计的必要需求

2.响应式布局出现的背景

自适应虽然成为网页设计的必要需求,但还是暴一个问题,如果屏幕太小,即使网页内容能够根据屏幕大小进行适配,但是在小屏幕上查看,会感觉内容过于拥挤,了用户体验。此时,为了解决这个问题而衍生出来的概念就是响应式布局。它可以自动识别屏幕宽度、并做出相应调整。网页的排版布局和展示的内容会有所变动

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
教培机构主要社群营销工具WeTool被微信封杀

教培机构主要社群营销

5月25日晚,第三方微信粉丝和社群管理工具Wetool被微信
亚马逊Kindle和Echo团队在美打造跨州新冠检测网络

亚马逊Kindle和Echo团

亚马逊的Kindle和Echo团队正在打造公司内部新冠检测实
武汉市首批快递工程专业职称评定 36人获得助理工程师资格

武汉市首批快递工程专

经湖北省快递工程系列职称改革工作领导小组办公室公示
美团突破千亿美元王兴身家突破百亿 业绩亏损为何暴涨

美团突破千亿美元王兴

账户里数百亿的现金,也让其具备度过疫情的能力,以及疫情
韩国检方传唤三星掌门李在镕

韩国检方传唤三星掌门

据外媒报道,三星集团继承人李在镕(Jay Y. Lee)周二因集团
顺丰外卖,同城配送的又一次释能

顺丰外卖,同城配送的又

日前顺丰上线外卖平台丰食引起了市场巨大的关注,一度被
最新文章
白话分析自适应跟响应式的区别详解

白话分析自适应跟响应

这篇文章主要介绍了白话分析自适应跟响应式的区别详解
div与div之间有空隙的解决方法

div与div之间有空隙的

今天在制作页面的时候发现两个div之间有空隙导致两个
推荐一款酷炫闪烁的告警按钮

推荐一款酷炫闪烁的告

今天小编给大家推荐一款酷炫闪烁的告警按钮,非常不错,具
移动端开发1px线的理解与解决办法

移动端开发1px线的理

这篇文章主要给大家介绍了关于移动端开发1px线的理解
前端浏览器字体小于12px的解决办法

前端浏览器字体小于12

这篇文章主要给大家介绍了关于前端浏览器字体小于12px
详解Web前端性能优化详解之资源合并与压缩

详解Web前端性能优化

这篇文章主要介绍了详解Web前端性能优化详解之资源合