前端开发分辨率的问题

Question

最近用mac开发网页 由于我的是retina屏，本来开发的网页还算看得过去，但是在一般PC上打开却因为分辨率的问题，布局完全走形...请问有遇见过这问题的前辈指点一下该怎么做

Answer 1

首先说下页面布局 和是否是 retina 屏幕是没有关系的。

根据你描述的，你只是把在mac上开发的页面放到了pc上面，引起布局乱
猜测:
1. pc端浏览器与 mac 浏览器差异， mac浏览器没有 IE 很有可能是ie兼容性引起的。
2. 页面微变形，也很有可能是 mac和 pc 文字渲染不同引起的，
3. 是否是资源加载有问题呢？ 比如mac Safari 可以跨域请求， 但是你用pc的没有用 Safari打开。
4. 回归分辨率的问题，retina 的笔记本 页面宽度是1440.你是否是剧中布局呢？

retina与普通屏幕的差异:

举个简单例子就当前你看到的页面， 你自己的头像，你看到的尺寸是2424的，但是呢，实际那张图你下载下来看是6464的。如果这张图刚好是 24*24 那么在你的 retina 屏幕 就是模糊的。 这种是用 压缩大小来，提高图片的精度。 另一个例子就是 segmentfault 的logo 是svg 矢量图的格式，矢量图矢xml文件，无论多高分辨率的屏幕加载都不会模糊，当然 svg 里面也可以嵌入位图就另说了。 很多网站的icon 都是用的 svg 就是这个原因。

最后给你推荐本书看吧 响应式Web设计

Answer 2

简单一点的 用百分比来控制页面的元素