一文读懂响应式网站设计元素
2021-01-05
网站建设
1139
响应式网站的特性
响应式网站是由一位研发人员Ethan Marcotte提出的，他以为响应式网站应该具有三个特性：
一是具有灵敏的网页布局；
二是具有灵敏的图片习惯；
三是具有灵敏的媒体查询，或者说媒体条件。
下面，咱们分别对这三个特性进行解读。
灵敏的网页布局
网格这个术语在web规划中越来越含糊。说您的站点必须由一个灵敏的网格组成，并不意味着您只能从十几个左右的大型网格体系中进行选择。为列、距离和网页界说自己的参数一般是web规划的最佳解决方案，并且能够像现有的任何体系相同灵敏。
事实上，大多数现有的网格体系都约束运用CSS类来界说巨细、空间和对齐办法。与编写自己的网格相比，测验将这些约束叠加到响应性web规划上可能比较棘手，也更耗时。无论是在运用预先制造的网格体系仍是创建自界说解决方案，灵敏网格体系真实重要的方面在于布局巨细和距离的机制。
关于网页规划师来说，这意味着抛弃咱们喜欢的像素，代之以运用百分比和em(相对度量单位)的网页布局。
当然，这并不意味着咱们停止运用图画编辑软件中的像素(比方Photoshop、Fireworks等)。 灵敏的网格，可依据浏览器视图的巨细更改布局。布局的变化能够通过流畅的动画表现出来。
灵敏的图画
运用灵敏的网格移动和缩放图画是响应式web规划的另一个关键特性。灵敏的图画常常让web规划人员感到头痛。当咱们想在更小的浏览设备上为文本内容供给更多的空间时，运用宽度和高度HTML特点来缩小图片的巨细，加载巨大的、超大的图片，关于更快的web页面加载时刻来说不是一个好的实践。
当然，这一问题的严峻程度也取决于站点的图画质量。随着web规划的发展，咱们不断地看到包含越来越少不必要的图片和库存相片的站点。也许这是一个很好的时刻来评价您的web规划是否需求像现在这样注重图画。
另一种缩放图画的办法是用CSS裁剪它们。CSS overflow特点使咱们能够为习惯新的显示环境而动态裁剪图画。
咱们还能够在服务器上有多个版别的图画，然后依据用户署理运用服务器端或客户端特性检测和DOM操作动态地供给适当巨细的版别。
媒体查询
媒体查询也被称之为媒体条件，指的是代码能够依据屏幕巨细来改动出现的办法。
一般，人们以为它们是响应性规划的核心组件，而让灵敏的页面组件成为可选的。实际情况是，如果没有一个优秀的HTML和CSS基础，媒体查询简直毫无用处。
媒体查询允许规划人员运用相同的HTML文档构建多个布局，办法是依据用户特性(比方浏览器窗口的巨细)选择性地供给样式表。其他参数包含方向(横向或纵向)、屏幕分辨率、色彩(即屏幕能够出现多少色彩)，等等。
媒体查询并不是一种移动解决方案或平板电脑解决方案。相反，媒体查询和响应式规划让咱们能够跳出屏幕巨细或分辨率的约束，开始构建能够灵敏习惯一切不同屏幕的网站。