移动端两倍像素是怎么回事啊？

发布于
2018-01-20

我是前端，UI发来的设计图，是700多宽度的，但是我一直是写的1024以上PC，768以上平板，768px以下是手机端，但是公司的UI非说他们作图软件上，iphone6尺寸是700多像素的宽度，我就蒙了，然后我给UI讲，我写的一般是电脑端四个块一排，平板端两个块一排，手机端一个块一排，而一个块，大概就是三四百宽度的时候了。
UI也一直跟我说，iphone6就是700多宽度，本来就是有700多像素点。。。

所以。。想问问各位大神，我是应该适配移动端到768宽度就停手不管，还是应该让我们公司UI把300多宽度的一个块一排的情况给我也设计出来呢？

这个问题怎么解决呀！！！在线等！急！

html5 html css css3

阅读 5k

7 个回答

✓ 已被采纳

一个是物理宽度，一个是展示像素

XiuBug

8.5k1016

发布于
2018-01-20

更新于
2018-01-20

谢邀！
可以看一下我之前写的文章：移动端(手机端)页面自适应解决方案—rem布局篇

企鹅

6426

发布于
2018-01-20

百度flexble移动端有真相
实际上是手机的物理像素与实际像素不一致引起的 ui的是对的

拾肆

1.6k129

发布于
2018-01-20

我们公司的ui宽度就是按照720px设计的，移动端我们一般使用rem作为单位，在<head></head>标签中放入以下代码

<script type="text/javascript">
  (function(win) {
    var doc = win.document;
    var uiWidth = 720;//设计稿UI的宽度
    var evt = "onorientationchange" in win ? "orientationchange" : "resize";
    function setFontSize() {
      doc.documentElement.style.fontSize = win.innerWidth / uiWidth * 100 + 'px';
    };
    win.addEventListener(evt, setFontSize, false);
    doc.addEventListener("DOMContentLoaded", setFontSize, false);
  })(window);
</script>

然后所有的css单位用rem，比如720px就用7.2rem，依次类推

xdsnet

7.6k3527

发布于
2018-01-20

这个要具体看什么内容，要怎么排列啦

绿巨人

512

发布于
2018-01-22

新手上路，请多包涵

手机屏幕上显示的宽度应该是设计图上的宽度除以像素比，iPhone6的像素比应该是2，所以设计图上是700像素宽的话，手机上的宽度应该是350，别听那种不懂前端的ui瞎说。