问

html5 - 请教一下移动端开发，设计图与手机像素的问题。

mobiledu2502875617 发布于 2022-11-03 09:13

css

iphone

图片

view

我初学移动端开发，目前知道devicePixelRatio=物理像素 / 逻辑像素，还有就是CSS中1px的大小是并不固定的相对单位，是随着设备变化的。

有个问题请教大家：
iPhone5的devicePixelRatio是2，而且iP5横向物理像素是640，那么：
2 = 640（物理像素）/ x（逻辑像素），可以得出逻辑像素是320。2个物理像素，是1px（CSS的1px）。

有一张设计图宽度是640px，我想让显示到iP5上。
我用img标签引入图片，在CSS中设置 width:320px; height:266px;然后在head标签中加上:

F12，在chrome中模拟，结果出现横向滚动条，需要拖动才完整浏览，请问这是为什么？谢谢！

代码：

初始缩放

截图：

12 个回答

img宽度可以设置100%,继承父容器的width值，另外移动端开发，较多用的是REM值来针对响应式开发。

2022-11-12 01:55 回答

epa4316380
一般图片大小是设计稿的1/2就好，如果要精确的话就要弄几套了

2022-11-12 01:55 回答

爱上小胸女人
设置一个样式
.fullwidth{
```
width:100%;
```
}

想哪个宽度100% 就直接加上去就行了···上面的例子应该加在图片上面
2022-11-12 01:55 回答

kingjade999
把宽高定在p上了。。

2022-11-12 01:55 回答

mobiledu2502900505
如果嫌麻烦的话直接@2x图就行了，放大一倍缩小一倍都不会有太大问题。如果要求严格的话最好是三套图。

2022-11-12 01:55 回答

张丽君2502934023
图片宽度100%，可以解决很大一部分需求，对这个理解不够丫

2022-11-12 01:55 回答

浪漫族屋nr
你这个屏幕的宽度设置为320，也就是物理像素为320，转换为css像素也就是160px。而你的图片宽度切为了320px，也就是屏幕宽度的两倍，只要把图片宽度设为160px或者把屏幕宽度设为640即可。
建议看一下啃先生的【移动适配】系列文章，讲得很详细。

2022-11-12 01:55 回答

幸福璞子难_197

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
    <title>初始缩放</title>
    <style>
    *{margin: 0; padding: 0;}
    p{width: 320px; height: 134px; 
    p img{display:block;width:100%;height:auto}
    }
    </style>
    </head>
    <body>
        <p>
            <img src="640.jpg">
        </p>
    </body>
    </html>

您的页面倒是viewport了，但是图片不是还是640的么？需要预定义一下img；PS：如果页面是320的话，图片弄640的就没有用了；反正都是半像素显示的；

2022-11-12 01:55 回答

啊迎春的-爱

在Iphone这样的设备上，可以设置meta标签为这样，
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=0.5">
关于移动端的适配你可以看看这篇文章：
使用Flexible实现手淘H5页面的终端适配

2022-11-12 01:55 回答

xuyang200788
有在手机上看过吗？
一般写width: 100%;就够了。高度会根据比例自动变化

2022-11-12 01:55 回答

L-Darin_209
图片设置width和height的一半

2022-11-12 01:55 回答

瓜妞妹妹
你把宽度定义在p上了，应该定义img的宽度
```
img {
  width: 320px;
}
```
2022-11-12 01:55 回答

唐静静y

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签