1回答

UltraNeo

提问者

2017-04-11

这个问题是在看视频的时候问的，看完视频后，才明白老师说的1像素是指设计图里的1像素（但是设计图里好像并没有写明是1像素border），而不是CSS里面的1px。设计图“外卖05”指明了总宽度是720px，而iphone6的dip（理解为和硬件分辨率无关的分辨率，即meta标签中的device-width值）是375*667，720/375约等于2，所以老师才在视频中不断提到dpr(设备像素比)为2。

视频中希望做到设计图里的1px边框，也就是在DPR为2的设备上的0.5px CSS边框，所以才大动干戈，调用transformY进行缩放等等。这里是有疑问的， 设备的DIP本身就是一个很好的参考指标，比如iphone6的屏幕宽度375，iphone6 plus的屏幕宽度414，正好和它们的设备实际宽度成比例，而且大部分移动设备的DIP都正好对应了它们的实际屏幕大小（而不是硬件分辨率）。换句话说，在设置了meta的width=content-width之后，1px的CSS在各种移动设备上的肉眼效果几乎是相同的，那么设计图以这个标准为参考显然更为合适，比如以iphone6为基准时，就定下375*667为设计图的尺寸，自己立一套标准，像现在定一个720的宽度，再让前端自己去计算转化，反而又麻烦又容易出错。

如果像视频那样考虑根据不同的dpr进行不同比例的缩放，那border考虑了，字体和其它组件要不要考虑？28px的字体高度，是不是要准备一个28/2=14px的字体，再准备一个28/1.5=19px的字体？所以个人认为还是应该像上一段说的，设计的时候就以移动设备的dip为参考基准，然后CSS直接写border为1px就完了，既方便，又符合在移动设备上的视觉效果，这么麻烦地做，好像并没有必要。

1

0