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

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

一、什么是自适应布局

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

自适应布局演示图:

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

二、什么是响应式布局

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

响应式布局演示图:

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

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

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

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

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

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

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

最新资讯
Verizon第三季度营收315亿美元 同比下滑4.1%

Verizon第三季度营收3

美国移动运营商Verizon通信今日发布了第三季度财报,总
重磅:蚂蚁集团科创板IPO获批 或于11月上旬挂牌

重磅:蚂蚁集团科创板IP

分析指出,蚂蚁集团希望A+H同步上市,流程料需时T+6,最快在
SpaceX完成星际飞船原型静态点火测试 首次搭载三引擎

SpaceX完成星际飞船原

据报道,特斯拉CEO埃隆·马斯克(Elon Musk)旗下太空探索技
微软员工多样性承诺升级:下任CEO或为少数族裔女性

微软员工多样性承诺升

据报道,微软日前在提交给美国证券交易委员会(SEC)的一份
证监会同意蚂蚁集团IPO注册 A股迎来第一家互联网巨头

证监会同意蚂蚁集团IP

证监会同意蚂蚁集团科创板首次公开发行股票(IPO)注册。
花小猪负责人孙枢接棒 网约车换帅能救滴滴吗?

花小猪负责人孙枢接棒

10月21日,滴滴出行发布内部信,公布了多项人事调整,孙枢任
最新文章
网页简单布局之结构与表现原则分享

网页简单布局之结构与

一般来说html结构 css表现 javascrip行为,网页布局要考
隐藏 Web 中的元素方法及优缺点教程详解

隐藏 Web 中的元素方

这篇文章主要介绍了隐藏 Web 中的元素方法及优缺点教
白话分析自适应跟响应式的区别详解

白话分析自适应跟响应

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

div与div之间有空隙的

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

推荐一款酷炫闪烁的告

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

移动端开发1px线的理

这篇文章主要给大家介绍了关于移动端开发1px线的理解