html640设计稿,为什么写移动端的ui给的640设计稿的宽度，在写html的时候要除以2才正好。...

ui给的设计稿是640的

为什么我在浏览器要设置成320iphone5的宽度来写html代码??

640代表的是手机的分辨率，也就是实际的物理像素，为640×1136

这个物理像素并不代表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的逻辑分辨率是320×568，但是物理像素是640×1136，像素密度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

用REM做元素大小的单位。你去搜下rem。 其实REM单位就是个根据比例自动给你算好PX大小。 这个比例是根据HTML的默认字体大小为基数。 具体你去找个教程看下。