移动端css适配的一些问题
其实现在很多移动设备的分辨率都很高了，比如iphone5，dpi为2，它的物理分辨率是640x1136。google了一下初步了解了一下，我有几个问题：
1、那么是不是当viewport为device-width的时候，它的视口宽度为物理屏幕的宽度，能展示的宽度为屏幕的宽度，这时候是不是会用4个物理像素来渲染一个css像素？
2、如果设置viewport为屏幕宽度的2倍的的时候，能展示的宽度为屏幕宽度的2倍，那么会以多少个物理像素来渲染一个css像素？其实是不是屏幕总是以4个物理像素来渲染一个css像素，还是说会根据viewport的不同来决定用多少个物理像素来渲染一个css像素？
3、在现实工作中，美工交给我们的图是640px宽度的。那么我们写布局的时候要怎么写？直接按照设计图中各个元素的宽高来布局吗？像字体大小等是完全按照设计图来写吗？还是说要做什么适配来适应不同大小的屏幕的？
4、其实拿到图之后整个工作流程是怎么样的啊...像元素宽高、图片宽高、font-size这些都要做什么适配啊？会不会需要根据不同屏幕大小整体全局改变大小（像利用rem等手段），或者改变viewport的？
5、移动端适配都有哪些坑？？？
这问题有点蠢啊...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果你拿手机来看一个平时用桌面电脑浏览的网页，那么一定会经历下面两种状态：页面被缩小，以至于文字无法阅读，或者处于适中的缩放比例，但只显示了整个网页的一小部分。
这个网页里有一个元素的css宽度定义是
width: 100px;，显然，它是不变的。类似的，你的手机的屏幕宽度也是不变的。但是，你通过手指缩放，就可以让这个元素占据手机屏幕不同的宽度比例。所以，简单来说，多少个物理像素来表示一个css像素，是由缩放直接决定的，而不是viewport。
设计师给的640px宽的图，可以有这样的做法：
（初级）最外层一个水平居中的容器，固定宽度320px，然后所有元素都按照1/2的测量像素来定义宽高。
（中高级1）只把设计图当做一个参考，利用flexbox等特性做弹性布局。
（中高级2）直接按照桌面网站的开发方式定义宽高及字体大小，但是使用rem单位。需要对所有元素进行适当的数学计算，把设计稿的测量值转换为rem相对值，以及，需要一段根据屏幕尺寸改变
<html>的font-size的js。建议题主多自行尝试，既然一张固定640px宽的设计稿想让你做出多设备可用的效果，那就不用局限于像素还原。