Day33:HTML(30) HTML响应式网页设计

HTML响应式网页设计
响应式网页设计(英语:Responsive web design,通常缩写为RWD),或称自适应网页设计、回应式网页设计、对应式网页设计。 是一种网页设计的技术做法,该设计可使网站在不同的装置(从桌面电脑显示器到行动电话或其他行动产品装置)上浏览时对应不同解析度皆有适合的呈现,减少使用者进行缩放、平移和卷动等操作行为。
对於网站设计师和前端工程师来说,有别於过去需要针对各种装置进行不同的设计,使用此种设计方式将更易於维护网页。
采用 RWD 设计的网站使用CSS3 Media queries,即一种对 @media 规则的扩充,以及串流的基於比例的网格和自适应大小的图像以适应不同大小的装置:
串流网格概念要求页面元素使用相对单位如百分比或字型排印学调整大小,而不是绝对的单位如像素或点。
灵活的图像也以相对单位调整大小(最大到 100%),以防止它们显示在包含它们的元素外面。
Media queries允许网页根据存取站点装置的特点而使用不同 CSS 样式规则,最常用的是浏览器的宽度。
参考资料: https://zh.wikipedia.org/wiki/%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1


<<:  VMware Horizon Client, Compose Server, Horizon Server 每周固定时段异常无法连线 !

>>:  Day33 | 赛後中场休息 X 复刊时间

Day25 - 如何在 Next.js 中正确地使用 lodash,使用 babel-plugin-import

前言 在前端通常会导入一些方便的 utility 函式库,以 lodash 来说,它是一个够帮我们处...

愿Alex老师安息,一路好走!

Alex老师是为台湾CISSP资安教育训练开创新局的好老师! 愿Alex老师安息,一路好走! Al...

30天学习笔记 -day 19-viewpager动画(PageTransformer )

一般的ViewPager在做滑动的过程中总是会觉得少了点流畅感,今天会使用PageTransform...

资视就是力量 - Highcharts / 尾声

终於,花了一个月的时间,我们从零开始认识 Highcharts 到现在已经能够配合 Vue.js 一...

Day 30:未完待续,不停地学习!

今年,是我第一次参加铁人赛,而今天也是自我挑战的达标日,但正如标题所写的,达标对我而言只是一个阶段,...