响应式网站建设知识

建设响应式网站的几个关键组成部分

2018-04-05

兰州网站建设 : 建设响应式的网站就是实现响应式页面的过程,而在响应式页面中包括了几个非常关键的组成部分,这里就逐一分析一下这几个关键的组成部分。 1、页头部分使用的met

        建设响应式的网站就是实现响应式页面的过程,而在响应式页面中包括了几个非常关键的组成部分,这里就逐一分析一下这几个关键的组成部分。

        1、页头部分使用的meta

        绝大部分的浏览器打开一个html的网页时,都会将该页面进行放大成为一个宽视图,通过这种方式来是页面与屏幕的分辨率相匹配。而视图meta标签则有着重置的功用。因此在响应式的页面中,通常就是通过meta来告诉浏览器,要用当前设备屏幕宽度来作为显示页面的宽度,并且会禁止页面初始的缩放。编码时将meta写在页头部分即可,这是最简单的实现不同分辨率屏幕设备上的响应式的方法。

        2、使用流体布局

        在电脑端使用的页面基础上,把原来用像素作为单位来标示的元素按照百分比的方式或者字体的比例方式来进行元素的布局,这是目前响应式进行布局的两种主要的方法。使用百分比的方法就是将父容器宽高当做100%,与其他元素宽高进行对比,用像素值作为对比的具体值得到一个百分数的比值,计算过程比较复杂,且一般带有小数位。而使用字号的比例来布局的方式,对比的过程与百分比的方式相同,唯一不同的是其结果是使用em的方式来表示的。比如某个元素在父容器中的字号是20px,那么em就是3.2em*3.2em,当字号的基准根据分辨率发生了变化时,元素的宽高也会进行相应的缩放。

        3、使用弹性图片

        进行图片处理最重要的一点就是保证分辨率改变了图片也不会失真,但是要做到这点是比较难的。因此目前的做法基本是不去理会图片的失真问题,只保证图片能够根据屏幕分辨率的改变而改变图片的宽高,要实现这点一般都是设定父容器中的图片宽度为100%,不设定具体像素单位的宽高,这样就能实现自动进行尺寸调整了。

        4、使用媒体查询

        这是响应式页面很重要的一个部分,要根据不同尺寸进行调整,首先得知道尺寸的改变才行。比如在上面所提到的布局方式中的字号法,就必须要使用媒体查询来得到字号的基准,才能实现元素根据不同分辨率改变大小。

        通过上面这四个关键性的技术,就能实现一个响应式的页面了,这样看起来其实也不是那么难的,难的是如何将这些技术运用自如,而只有经过不断的使用练习才能做到熟练的进行运用。