前端开发分辨率的问题


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

web前端开发 前端工程师 retina mac

哎哟-重口哦 10 years, 2 months ago

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

伦伦伦伦伦伦巴 answered 10 years, 2 months ago

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

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

retina与普通屏幕的差异:

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

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

忧郁D一秒 answered 10 years, 2 months ago

Your Answer