移动端适配问题

Noiya

24844459

发布于
2017-07-14

更新于
2017-07-14

高清屏中1px = 2px 如果设计稿是640切图的时候就要除以2去切，今天做个实验有些疑惑为什么我给头部定义50px的高，在移动端没有变成100px呢?

pc端

iphone5下

这时候高度看起来好像不一样但是如果只截取一小部分的话看起来高度没有任何区别

iphone5

另外一个困惑就是看很多文章说移动端用rem，后来甚至可以用flexible.js自动适配，而我写的固定高度的px看上去也没什么问题啊高度没有随着dpr值得变化而变化？

下面是源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
    <title>像素的秘密</title>
    <style type="text/css">
        *{
            margin:0;padding: 0;box-sizing : border-box;text-decoration: none;list-style: none;font-size: 14px
        }
        html,body{
            width:100%;
            height: 100%;,
            -webkit-overflow-scrolling : touch;
        }
        .head{
            height: 50px;width:100%;text-align: center;line-height: 50px;position: fixed;background: #00b38a
        }
        .main{
            padding-top: 50px;width:100%;background: #eee;height: auto;padding-bottom: 60px;
        }
        .main .banner{
            height: 180px;background-image: url(img/short.png);background-repeat: no-repeat;background-size: 100% 100%;
        }
        .item{
            width:100%;height: 45px;background:#fff;overflow:hidden;margin-top:10px;
        }
        .item .job,.item .money{width:50%;float:left;height: 100%;line-height: 45px}
        .item .job{
            text-align: left
        }
        .item .money{
            text-align: right;
        }
        .foot{
            position: fixed;width:100%;height:50px;bottom: 0;left: 0;overflow:hidden;background:#00b38a;
        }
        .foot li{
            width:25%;text-align: center;height: 50px;line-height: 50px;float: left;
        }


    </style>
</head>
<body>
  <div class="head">标题</div>
  <div class="main">
      <div class="banner"></div>
      <div class="news">
          <li class="item">
              <span class="job">职位：工程师1</span>
              <span class="money">薪资：15-20K</span>
          </li>
          <li class="item">
              <span class="job">职位：工程师2</span>
              <span class="money">薪资：15-20K</span>
          </li>
          <li class="item">
              <span class="job">职位：工程师3</span>
              <span class="money">薪资：15-20K</span>
          </li>
          <li class="item">
              <span class="job">职位：工程师4</span>
              <span class="money">薪资：15-20K</span>
          </li>
          <li class="item">
              <span class="job">职位：工程师5</span>
              <span class="money">薪资：15-20K</span>
          </li>
          <li class="item">
              <span class="job">职位：工程师6</span>
              <span class="money">薪资：15-20K</span>
          </li>
          <li class="item">
              <span class="job">职位：工程师7</span>
              <span class="money">薪资：15-20K</span>
          </li>
          <li class="item">
              <span class="job">职位：工程师8</span>
              <span class="money">薪资：15-20K</span>
          </li>
          <li class="item">
              <span class="job">职位：工程师9</span>
              <span class="money">薪资：15-20K</span>
          </li>
          <li class="item">
              <span class="job">职位：工程师10</span>
              <span class="money">薪资：15-20K</span>
          </li>
          <li class="item">
              <span class="job">职位：工程师11</span>
              <span class="money">薪资：15-20K</span>
          </li>
          <li class="item">
              <span class="job">职位：工程师12</span>
              <span class="money">薪资：15-20K</span>
          </li>
          <li class="item">
              <span class="job">职位：工程师13</span>
              <span class="money">薪资：15-20K</span>
          </li>
          <li class="item">
              <span class="job">职位：工程师14</span>
              <span class="money">薪资：15-20K</span>
          </li>
      </div>
  </div>
  <div class="foot">
      <ul>
          <li class="navbar">首页</li>
          <li class="navbar">求职</li>
          <li class="navbar">简历</li>
          <li class="navbar">更多</li>
      </ul>
  </div>
</body> 
</html>

html5 html css javascript

阅读 5.2k

4 个回答

toBeTheLight

1px永远都是1px。px这就是页面上元素的尺寸单位。
Retina的dpr为2，其实是理想视口下，1px的像素点会由2*2个物理像素来渲染（渲染更精致，且一个物理像素是渲染的最小单位。非Retina屏1px就是1物理像素大小，那么小于1px的元素如何渲染？然后针对Retina屏有些设计会要求你用一个物理像素去呈现边框。这时候就会用到缩放的问题了）。

其他的我感觉你需要去看一下，移动浏览器对pc页面(就是没做任何处理的页面)是怎么做的适应性显示和meta头的具体作用。想搞明白的话只看适配方案是不行的。

你的第二个问题。
没有理解rem适配的作用或者说目的。
你没有发现在不同分辨率下的你的页面的结构不是等比例的吗，有些间距是不同的，正是因为元素尺寸没有跟随分辨率改变引起的。

第一个问题，你加下面这个表头了，简单粗暴的理解，只要有了这个，比如宽度640px,就是640像素，不管什么屏幕！你把这个表头去掉，就知道区别了！

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
<!--大概意思是
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例   
maximum-scale - 允许用户缩放到的最大比例  
user-scalable - 用户是否可以手动缩放  
-->

第二个问题，rem的大小是根据根元素，就是html标签的font-size样式来定义的，是需要计算的。如果你不做计算，那么默认就是1rem=16px;(就比如你在html文件中，就写一个文字，什么样式标签都不加的情况下，这个文字大小就是16px，默认情况html的font-size就是16px;)。无论你在什么地方看，都是这样1rem=16px！

最后，关于rem计算方式有很多，我就说我用的计算方式吧！
我的计算方式是 ‘(屏幕宽度/效果图宽度)*100’
然后通过js设置html的font-size。
比如效果宽度是750px, 我在iphone6打开，屏幕宽度就是375px
然后 (375/750)*100=50
然后通过JS，把html标签的font-size设置成50px
这时候
1rem=50px;

使用方式就简单了，比如一张图片，宽高都是100px;
在样式上就是。

img{
    width:1rem;
    height:1rem;
}

这样的设置的样式，那么这张图片，实际上，在iphone6就变成了宽高都是50px了（在iphone6上，1rem=50px）

同理，然后在屏幕宽度750px的设备上，根据公式，1rem=100px;

那么这张图片，宽高都是100px了;

适配完整代码如下（我自己使用的算法）

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            //如果屏幕大于750（750是根据我效果图设置的，具体数值参考效果图），就设置clientWidth=750，防止font-size会超过100px
            if(clientWidth>750){clientWidth=750}
            //设置根元素font-size大小
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };
    //屏幕大小改变，或者横竖屏切换时，触发函数    
    win.addEventListener(resizeEvt, recalc, false);
    //文档加载完成时，触发函数 
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);