响应式网页设计的核心是遵守三个主要准则:流体网格,响应式媒体和媒体查询。在某些情况下,当设备没法确定网站的初始宽度或规模时,响应式网页设计也会行使媒体视口元标识表记标帜,从而不会触发媒体查询。如下是注释的根本响应式网页设计准则:
1.流体网格
流体网格的事情体式格局与其余任何设计网格同样,它们使您可能以好看的体式格局在页面上分列元素。可是,与传统的网格差别,流体网格将按照屏幕尺寸进行调整,并可以顺应任何宽度,由于它运用相对于的丈量单元(比方百分比或em单元),而不是固定的单元(比方像素)。
2.媒体查询
媒体查询使您可以愈加活络地设计响应式设计,并按照特定的屏幕尺寸进行响应调整。用外行的术语来讲,网站运用媒体查询来搜集数据,以协助他们确定屏幕的大小,而后加载适量的css样式。
3.响应媒体
响应式网页设计的第三个核心准则是响应式或灵活的媒体。鉴于现代网站运用大量的图象,视频和其余媒体文件,因而这些类型的内容必需响应差别的屏幕尺寸。
常规,设计职员会将图象尺寸包括在其css样式表中。可是,由于上述固定的丈量单元,因而不合用于响应式设计。相反,您必需对图象文件,视频和其余媒体类型运用max-width属性。为确保媒体文件不会超越其容器并按照屏幕大小很好地缩放,应将max-width属性配置为100%。
4.视口元标识表记标帜
如前所述,当媒体查询由于设备没法确定网站的初始宽度而不会触发时,视口元标识表记标帜就会起作用。
视口meta标签常规将高度或宽度值的初始比例配置为1,从而解决了运用设备高度或宽度与视口尺寸之间的比率没法辨认网站比例的问题。