web响应式设计

本文由清尘发表于2016-02-05 14:04最后修改于2018-09-13属于HTML/CSS分类

响应式设计网站 : https://mediaqueri.es/

教程: 响应式 Web 设计技巧
使用 CSS 媒体查询创建响应式网站

响应式设计理念是基于流动布局、弹性图片、弹性表格、弹性视频和媒体查询等技术的组合。使用百分比布局创建流动的弹性界面,同时使用媒体查询来限制元素的变动范围,这两者组合到一起构成了响应式设计的核心。而固定宽度像素的布局无法实现多变的,未知的设备。

关于流动布局,它是一种适应屏幕的做法,即不固定 DIV 的宽度,而是采用百分比作为单位来确定每一块的宽度。具体采用的方式就是弃用 px,改用 em 或%为单位,早期我们此方式是为了文字缩放,确保老版本的 IE 也能调节字体大小。您可能会有疑问,既然现代浏览器很久以前就支持缩放以像素为单位的文字,那么用 em 的优越性又体现在哪里呢?最大的优势是,当我们用相对单位 em 来写布局和字体大小时,如果我们给标签设置文字大小为 100%,给其他文字都使用相对单位 em,那这些文字都会受 body 上的初始声明的影响。这样您可以批量修改页面文字和布局,相对更为灵活。缺点是可能在百分比的计算上不如像素那样简单直接,将像素转为 em 的诀窍在于,Dan Cederholm 写过一篇关于流式布局里文章里提到一个公式,目标元素尺寸÷上下文元素尺寸=百分比尺寸,并不能简单的把目标元素理解成子元素,把上下文元素理解成父级元素,虽然大多数时可以这么理解,但上下文元素并不一定代表父级元素