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

响应式WEB设计是指网页能够在不同大小的设备上自适应地调整布局和样式，以适应不同大小屏幕的显示需求。在这篇攻略中，我将介绍如何使用判断屏幕尺寸和百分比布局来实现响应式WEB设计。

判断屏幕尺寸

在实现响应式设计时，我们需要对不同尺寸的设备进行适配。可以使用CSS媒体查询来判断不同屏幕尺寸下应该采用何种样式和布局方式。

例如，下面的代码表示当屏幕宽度小于等于600像素时，应采用一组CSS样式；当屏幕宽度大于600像素且小于等于1200像素时，应采用另一组CSS样式；当屏幕宽度大于1200像素时，应采用另一组CSS样式。

@media screen and (max-width: 600px) {
  /* 样式1 */
}

@media screen and (min-width: 601px) and (max-width: 1200px) {
  /* 样式2 */
}

@media screen and (min-width: 1201px) {
  /* 样式3 */
}

百分比的使用

在响应式设计中，我们通常使用百分比布局来进行设计。百分比布局可以使元素的大小和位置相对于其包含元素自适应调整。例如，下面的代码表示一个占父元素宽度60%的div元素：

div {
  width: 60%;
}

使用百分比布局可以使页面在不同尺寸的设备上自适应地缩放。例如，如果我们将一个元素的宽度设置为50%，那么该元素无论在何种尺寸的设备上，它的宽度都会是父元素宽度的一半。

另外，需要注意的是，在使用百分比布局时，需要将父元素的尺寸设置为相对大小或者百分比。例如，下面的代码表示父元素的宽度为100%：

body {
  width: 100%;
}

示例说明

下面通过两个示例来说明如何使用判断屏幕尺寸和百分比布局实现响应式设计：

示例1

假设我们需要实现一个两栏布局，在屏幕宽度小于等于600像素时，显示为垂直布局；在屏幕宽度大于600像素时，显示为水平布局。可以使用如下代码实现：

@media screen and (max-width: 600px) {
  .left, .right {
    width: 100%;
  }
}

@media screen and (min-width: 601px) {
  .left {
    float: left;
    width: 40%;
  }

  .right {
    float: right;
    width: 60%;
  }
}

在示例中，当屏幕宽度小于等于600像素时，左右两栏的宽度均为100%；当屏幕宽度大于600像素时，左栏宽度为40%，右栏宽度为60%，并使用浮动来实现水平布局。

示例2

假设我们需要一个元素始终处于屏幕正中央，不论屏幕尺寸如何。可以使用如下代码实现：

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在示例中，我们使用绝对定位和transform来实现元素始终居中。其中，top和left属性设置为50%，表示元素的左上角应该位于屏幕正中央；transform属性用于调整元素的位置，使其水平和垂直方向上都居中。