资讯专栏INFORMATION COLUMN

网页的响应式布局

shadajin / 1401人阅读

摘要:响应式布局解决了什么问题解决不同屏幕之间的分辨率问题。解决问题的思维方式,看问题的思维方式可以留下来,跨域时间和空间。响应式布局的先决条件是什么响应式布局的依赖是什么的顶层样式表有两个规则构成。所以响应式布局依赖于顶层样表的两个规则。

响应式布局解决了什么问题?

解决不同屏幕之间的分辨率问题。什么时期出现的此问题?当时遇到了什么问题?当时的技术环境是怎么样的?

时间点: 2010年5月提出的概念,他叫Ethan Marcotte
刚好在2010年,移动互联网已经走入生活了。
为什么要提出?面临了什么问题?要提出一个新技术?
面临问题,每一个设备都要写一套前端代码,难道五个手机要写五套吗?
具体的技术也是解决当时存在的问题,如果这些问题不存在了,这些技术存在的意义也就少了。解决问题的思维方式,看问题的思维方式可以留下来,跨域时间和空间。现在是因为过去。

响应式布局的先决条件是什么? 响应式布局的依赖是什么?

css的顶层样式表有两个规则构成。一个at-rule规则,一个是qualified rule。所以响应式布局依赖于CSS顶层样表的两个规则。这是从规则角度来说的。真正依赖于谁,在解析CSS代码。解析完后,谁匹配所写的CSS规则,谁在渲染位图。

样式的输入:通过JS控制、通过直接通过选择器去控制。
你就是谁能改变标签的样式,选择器可以,哪谁监听浏览器窗口的变化,JS可以,CSS的media查询可以。

有两类用法,一个at规则,一个普通规则。

@media

flex

gird

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116122.html

相关文章

  • CSS Grid响应网页布局 - W3Schools视频03

    摘要:继续响应式网页布局的实现,今日讲的是方案。就是为二维布局设计的,最适合用来做网页布局。其中是最小宽度单位,等于六个等于三个等于两个而则等于五个。 继续W3Schools响应式网页布局的实现,今日讲的是CSS Grid方案。CSS Grid就是为二维布局设计的,最适合用来做网页布局。目前主流的浏览器都已经支持CSS Grid,除非你很确定你的用户常使用较旧的浏览器,不然的话,建议使用CS...

    piapia 评论0 收藏0
  • CSS Grid响应网页布局 - W3Schools视频03

    摘要:继续响应式网页布局的实现,今日讲的是方案。就是为二维布局设计的,最适合用来做网页布局。其中是最小宽度单位,等于六个等于三个等于两个而则等于五个。 继续W3Schools响应式网页布局的实现,今日讲的是CSS Grid方案。CSS Grid就是为二维布局设计的,最适合用来做网页布局。目前主流的浏览器都已经支持CSS Grid,除非你很确定你的用户常使用较旧的浏览器,不然的话,建议使用CS...

    leejan97 评论0 收藏0
  • Flexbox响应网页布局 - W3Schools视频02

    摘要:今日继续响应式网页布局的实现,采用方案。有经验的前端或多或少已经接触过这个网站,因为它经常出现在搜索结果的前几项。因此我想做一系列的影片专门介绍这些。 今日继续W3Schools响应式网页布局的实现,采用Flexbox方案。使用Flexbox实现响应式网页布局是目前最流行的做法。如果你对Flexbox并不熟悉,可以查看W3Schools的教学: W3Schools Flexbox教学...

    codecraft 评论0 收藏0
  • 谈谈响应布局

    摘要:今天在这里就略微谈一下响应式布局吧想必大家都知道响应式布局已经在这个移动端为主流的时代成为了避不开的话题之一接下来我们从小到大来谈谈响应式网页设计的基本原则为什么为什么需要响应式设计想必这点不说大家都能想到答案现在是一个移动为先的时代我们要 今天在这里就略微谈一下响应式布局吧,想必大家都知道响应式布局已经在这个移动端为主流的时代成为了避不开的话题之一,接下来我们从小到大来谈谈响应式网页...

    smallStone 评论0 收藏0

发表评论

0条评论

shadajin

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<