关于Retina屏怎么实现1px以及响应式布局的简单总结

这问题老生常谈了，搞过移动端的基本都会遇到，先来看看真机截图吧

<b>这是没有处理的，明显粗</b>

image.png

<b>这是处理过的</b>

image.png

为什么会这样，这是因为retina屏幕导致的，retina屏幕的dpr一般是2或者3，所以定义1px时，并不是我们想要的1px的效果
应该怎么去解决这个问题呢，使用scale即可，当dpr为2时，设置scale为0.5，当dpr为3时，设置scale为0.3333333
即这样

 meta.setAttribute('content', 'initial-scale=' + parseFloat(1 / devicePixelRatio) + ',width=device-width,user-scalable=no'

讲到这里，大家可能会有疑问，页面缩放了，其他的元素不也跟着缩放了吗，此时就要用到rem了，元素的大小使用rem定义，当scale改变时，同步改变html的fontSize，这样，dom的size也跟着改了
具体如下

var fontSize = parseFloat(document.documentElement.getBoundingClientRect().width / 10)
document.documentElement.style.fontSize = fontSize + 'px'

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <meta name="viewport" content="initial-scale=1,width=device-width" />
  <title>Demo</title>
  <style type="text/css">
  * {
    margin: 0px;
    padding: 0px;
  }
  
  .test {
    width: 3rem;
    height: 3rem;
    margin: 1rem;
    border: 1px solid red;
  }
  </style>
</head>

<body>
  <div class="test"></div>
  <script type="text/javascript">
  function setPage() {
    var meta = document.createElement('meta')
    meta.setAttribute('name', 'viewport')
    meta.setAttribute('content', 'initial-scale=' + parseFloat(1 / devicePixelRatio) + ',width=device-width,user-scalable=no')

    document.head.appendChild(meta)
    var fontSize = parseFloat(document.documentElement.getBoundingClientRect().width / 10)
    document.documentElement.style.fontSize = fontSize + 'px'
  }
  window.addEventListener('load', setPage)
  window.addEventListener('resize', setPage)
  </script>
</body>

</html>

以上代码，解决了下面几个问题
1.1px问题
2.移动端响应式布局
本来准备再截图的，但是截图效果有偏差，大家可以拷贝上面的代码到chrome的手机模式下跑跑，是不是在不同的终端下面，布局都一样呢？

一般情况下，我们的工作流程一般是这样的
1.产品定需求
2.设计出图片，一般是sketch或者是标注的图片
3.排版布局
4.联调接口
5.自测
6.发测试，预发布
7.上线
当我们拿到设计稿时，一般根据标注开始布局排版，目前主流的都是以Ip6作为基准，它是750宽度的，此时我们怎么样去做响应式让我们做的页面在各种终端上的效果都是一样的呢，其实上面已经代码已经讲了一大半了，需要对dpr不一样的情况做处理，然后去定义dom的大小，font的大小，我们只需要使用scss即可达到要的效果，可以采用gulp,webpack对scss进行处理。
直接看scss代码吧

@function toRem($value) {
  @return $value / 37.5px * 1rem;
}

* {
  margin: 0px;
  padding: 0px;
}

.test1 {
  width: toRem(200px);
  height: toRem(200px);
  background-color: green;
}

.test2 {
  width: toRem(75px);
  height: toRem(75px);
  background-color: red;
}

再来看看各终端的效果
ip5

image.png

好了，就说到这里吧，总感觉有些东西没说完或者是没说清楚的感觉，大家有兴趣，可以去下载demo自行研究吧

关于Retina屏怎么实现1px以及响应式布局的简单总结

推荐阅读更多精彩内容