(接上一节内容)
4.屏幕分辨率
屏幕分辨简单点说就是用户显示器的分辨率,深一点说,屏幕分辨率指的是用户使用的设备浏览您的Web页面时的显示屏幕的分辨率,比如说智能手机浏览器、移动电脑浏览器、平板电脑浏览器和桌面浏览器的分辨率。Responsive设计利用Media Queries属性针对浏览器使用的分辨率来适配对应的CSS样式。因此屏幕分辨率在Responsive设计中是一个很重要的东西,因为只有知道Web页面要在哪种分辨率下显示何种效果,才能调用对应的样式。
5.主要断点
主要断点,在Web开发中是一个新词,但对于Responsive设计中是一个很重要的一部分。简单的描述就是,设备宽度的临界点。在Media Queries中,其中媒体特性“min-width”和“max-width”对应的属性值就是响应式设计中的断点值。简单点说,就是使用主要断点和次要断点,创建媒体查询的条件。而每个断点会对应调用一个样式文件(或者样式代码),如下图所示:
上图的style.css样式文件运用在Web页面中,但这个样式文件包括了所有风格的样式代码,也就是说所有设备下显示的风格都通过这个样式文件下载下来。当然,在实际中还可以使用另一种方法,也就是在不同的断点加载不同的样式文件,如下图所示。
上图主要显示的是主要断点,主要断点加载的不同样式文件直接将影响Web的效果。除了主要断点之外,为了满足更多效果时,还可以在这个基础上添次要断点。不过主要断点和次要断点增加之后,需要维护的样式也相应的增加,成本也相对应的增加。因此在实际使用中,需要根据自身产品需求,决定断点。
综合下来,设置断点应把握三个要点:满足主要的断点;有可能的话添加一些别的断点;设置高于1024的桌面断点。