响应式WEB设计学习(1)—判断屏幕尺寸及百分比的

随着移动设备的普及，我们越来越依赖智能手机和平板电脑进行网页浏览。传统的固定页面设计在移动终端上的显示效果并不理想。为了解决这一问题，Ethan Marcotte提出了响应式Web设计的概念。

响应式Web设计的英文为Responsive Web Design，简写为RWD。这一设计理念的书籍，如O'REILLY的《Head First Mobile Web》，为我们揭示了实现响应式设计的技巧。

今天我学到的两招尤为实用：

利用media信息来判断屏幕尺寸。通过获取设备的屏幕宽度、高度等信息，我们可以了解用户正在使用的设备类型，从而做出相应的设计调整。

使用百分比来替代传统的像素单位声明宽度等与尺寸相关的信息。这样，无论用户在哪种设备问网页，页面都能根据设备的屏幕尺寸进行自适应调整，保持美观和易用性。

让我们看看今天试验的成果如何。在全屏显示页面时，页面布局展示正常。当我们将浏览器窗口缩小，模仿移动设备时，页面能够自动调整布局，适应窄屏显示。

那么，如何做到这些呢？在CSS文件中使用media语句。为了实现不同设备尺寸的适应，我们需要为各种尺寸预设不同的样式规则。例如，在PC显示器上，页面可能采用三栏布局；而在移动设备上，则可能需要采用流式布局。这两种布局的CSS样式是不同的。我们需要针对不同的布局编写不同的CSS代码，并使用media语句进行逻辑判断。

例如，当屏幕宽度达到480像素以上时，我们可以编写如下的CSS代码：

```css

@media screen and (min-width: 480px) {

/ 针对宽度480像素及以上设备的CSS样式 /

}

```

这样，当设备屏幕宽度达到480像素以上时，将应用该媒体查询下的CSS样式。通过这种方式，我们可以为不同的设备尺寸和屏幕分辨率提供不同的样式规则，确保页面在各种设备上都能良好地显示和用户体验。响应式Web设计为我们提供了一种灵活、适应多种设备的网页设计方案，使网页能够在不同的屏幕尺寸上展现出最佳的效果。