城网中国 首页 城网学院 建站教程 查看内容

城网小程云研发教程:响应式CSS样式

2020-8-30 12:36| 发布者: cnone| 查看: 124| 评论: 0

摘要: 城网小程云研发教程:响应式CSS样式

原生网格以“ CSS网格布局模块”的形式进入CSS。

媒体查询自2000年代初期就存在,但是直到2012年才成为W3C推荐的标准。像流体网格一样,媒体查询代表了响应式网站设计背后的基础技术。借助媒体查询,网站可以收集有助于确定访问者用来访问它的屏幕尺寸的数据。掌握了这些信息后,便会有条件地加载适合该特定屏幕尺寸的CSS样式。

响应式图像和媒体:当您只处理文本时,响应式网页设计会很好地工作。但是,现代网站包含许多媒体,例如图像和视频,这可能有些棘手。

处理图像和其他媒体文件的正确方法是使用max-width属性,而不是使用图像或媒体文件的尺寸。一个示例如下所示:

img { max-width: 100%; height: auto;}

如果要包括其他媒体类型,则样式设置会变得更加细微差别。height属性将不起作用,因此将填充物应用于容器的底部,然后将介质放置在该容器中是可行的方法。Thierry Koblentz早在2009年就提出了这种方法(hack) ,它仍然是最强大的方法。

.wrapper-with-intrinsic-ratio { position: relative; padding-bottom: 20%; height: 0;}

.element-to-stretch { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

将其添加到CSS代码后,所有图像和媒体文件都将随浏览器缩放,并且不会扩展到其容器之外。

既然我们已经介绍了响应式网站设计的核心原理,那么让我们深入研究它带来的优势。


鲜花

握手

雷人

路过

鸡蛋

最新评论