# 响应计算

houdunren.com@向军大叔

xj-small

开发中需要根据不同设备尺寸进行响应处理

# 设备像素

不同设备的像素尺寸差异很大,比如2K的27寸屏幕与4K的27寸屏幕的像素数量是不一样的。如果我们编写CSS时还要判断设备的物理像素就会很麻烦。

我们希望编写CSS时还是按照以往方式编写,至于具体绘制到屏幕上使用的具体像素让浏览器或小程序等自动计算就可以,这是最佳解决方案。

使用以下代码可以轻松解决上面的问题了

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

# 初始样式

有些标签默认含有内外边距,且不同浏览器大小也不一样。为了统一我们可以重置标签的CSS默认样式。

最简单的方式就是使用插件css-reset完成

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />

# 案例说明

下面是尺寸为375x600的设计稿,绿色区域为200px红色为175px宽度

image-20200323124619494

# 像素单位

使用固定像素定义时在iphone6与iphon6 plus中的显示效果并不相同

image-20200323125400666

实例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
  </head>
  <body>
    <div class="left"></div>
    <div class="right"></div>
  </body>
  <style>
    div {
      height: 600px;
    }
    .left {
      width: 200px;
      background: #76ba65;
      float: left;
    }
    .right {
      width: 175px;
      background: #df0f71;
      float: left;
    }
  </style>
</html>

# 自动响应

实际操作中不同设备只能取宽或高一个尺寸为响应处理,一般情况下我们取宽度响应,高度自动处理。小尺寸时高度产生滚动条,这并不影响什么。

计算公式

使用rem单位来处理响应,因为改变rem单位会影响所有使用rem的元素,这确实非常的方便。

  • rem是在根元素中定义的font-size
  • rem用来在多个设备响应处理时使用
  • html元素也可以使用:root选择器选择

下面展示的设计稿为375px宽,下面公式表示1px所占的屏幕尺寸宽度,有以下几点需要说明

  • 100vw表示100%设备宽度
  • 因为使用了vw宽度系统会根据不同设备自动计算rem
:root {
	font-size: calc(100vw / 375);
}

完整代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
  </head>
  <body>
    <div class="left"></div>
    <div class="right"></div>
  </body>
  <style>
    :root {
      font-size: calc(100vw / 375);
    }
    div {
      height: 600rem;
    }
    .left {
      width: 200rem;
      background: #76ba65;
      float: left;
    }
    .right {
      width: 175px;
      background: #df0f71;
      float: left;
    }
  </style>
</html>

现在使用不同设备时宽度已经自动可以响应设置了