ui给的设计稿是640的
为什么我在浏览器要设置成320iphone5的宽度来写html代码??
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
11
876
收藏
640代表的是手机的分辨率，也就是实际的物理像素，为640x1136
这个物理像素并不代表css像素，意思就是说设计稿的10px并不是你写在html的css的10px
这有一个换算，大多iPhone倍率是2，iPhone 6P的倍率是3，物理像素640 / 倍率2 = 320 ，得到逻辑像素
这个逻辑像素的值就是css像素
也就是说设计稿的640相当于写在html的css的320
你在做的时候，只要将设计稿量到的像素值除以2，再写到html的css里面
因为小屏iphone宽度就是320啊
安卓是360
给点提示，物理分辨率、逻辑分辨率，像素密度DPI。
视网膜屏有关吧
iphone5s的逻辑分辨率是320x568，但是物理像素是640x1136，像素密度2。
并不是所有手机都是 320px，常见手机的宽度可以用 chrome dev tool 查看
iphone5s的逻辑分辨率是320 x 568,而物理分辨率是640 x 1136，像素倍率是2。
相当于物理分辨率为320的iphone5s刚好显示物理像素为640的图片不会模糊。
可以了解一下DPI相关
现在很多要么基于iphone5的640设计稿，要么是基于iphone6的750设计稿，实际屏幕宽均为盖设计稿一半
Rentina显示屏原理及设计方案
说明：retina屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个。
在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。
那么，前端的应对方案是：设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2