响应式网站制作的技术原理。一个标准的网页通常由结构(HTML, XML, XHTML)、表现(CSS)和行为(DOM、ECMAscript)三部分组成,其中结构和表现部分则为响应式网站制作的要紧部分,另外CSS3标准的打造也为响应式网站制作奠定了基础。响应式网站制作的核心技术通常由以下三部分组成: 媒体查看又称为媒介查看,即通过CSS3的@media声明来查看展示媒介(终端设施)的显示尺寸,依据不同尺寸的终端设施来选择不一样的CSS样式,从而达到网页能自动适配多种终端的成效。@media声明从CSS3开始才被支持,目前的手机中的浏览器均支持CSS3,只有PC端的一些老旧浏览器不支持,如IE8以前的版本,不少网站已经舍弃这类老旧的浏览器。媒体查看示例代码如下:@media screen and (min-width:768px){这里设置你的CSS样式代码}
这里的网格布局是一个宽泛的定义,即结合了流式布局、弹性布局和栅格布局的特质,把整个网页划分成一个个网格,网页上每一个网格可以任意组合,最后表现为一个个内容块。通过与媒体查看配合,同时运用流式布局中以百分比或混合百分比作为度量单位的方法和弹性布局中Flex技术,从而达成网页响应式布局的成效。 响应式网站制作中,处置好图片也尤为重要。由于目前的网站总是会用大幅图片来展示内容,这就需要依据终端设施的宽度来自动调整图片的宽度,从而达到更好的显示成效。一般的做法是将图片宽度以百分比来度量,配合max-width或background-size等CSS属性来完成。