三方面解析实施响应式网站的步骤
2016-06-25
上文提到了响应式网站的必要性,本文中,我们将继续探讨响应式网站的实施方法。
首先,在丹·锡德霍姆(Dan Cederholm)编写的《无懈可击的Web设计》一书中,伊桑·马科特为其撰写了一章关于流动布局的内容。在书中,他提出了一个标准化的公式,即“目标元素宽度÷上下文元素宽度=百分比宽度”。
其次,CSS媒体查询的使用,其中min-width和max-width这两个属性值的设定,可以调节网页响应不同浏览设备的宽度范围,可以在设备屏幕宽度高于这个值的情况下,为页面指定一个特定的样式表,利用CSS媒体查询支持不同的视口大小匹配CSS样式。
再次,是弹性图片的应用。使用CSS的max-width进行简单的修复,该方法在伊桑·马科特关于流动的图片的文章中提到过。