前端pc页面的适配不同分辨率的问题?

Question

设计师给的设计稿是1920的宽度 其中安全宽度是1200 在安全宽度外面还有一个悬浮框
在1360 的笔记本电脑上就会出现悬浮框无法显示的问题
提问 ：
这种问题 应该怎么解决 一个设计稿 怎么适配所有的电脑屏幕
是否需要在设计一版安全宽度是1000的 来适配小屏的笔记本电脑啊 很纠结

Answer 1

这种问题 应该怎么解决 一个设计稿 怎么适配所有的电脑屏幕

你们对“安全宽度”的定义是什么？

1360 宽度下的屏幕表现本身是设计师要考虑的问题，并且明确传达给实现的人啊。

“一个”设计稿无法适配所有情况，“一套”设计稿可以。

是否需要在设计一版安全宽度是1000的 来适配小屏的笔记本电脑啊 很纠结

那看你如何定义“小屏”。

目前正常的桌面电脑， 1360 就是最小的了吧。

Answer 2

关于适配不同分辨率的问题，你可以用bootstrap这样的前端框架解决。
如果你不想用框架，就自己写媒体查询了。bootstrap也是大量的媒体查询。
设计师只有一个设计稿就麻烦了，因为在小屏幕上该怎么显示，前端开发并不能下决定，理论上你们请设计师设计的时候就应该告诉他适配多种尺寸的需求。
这个时候，在只有一版的时候，你可以去找产品经理，如果它不理你，你可以带把刀去找它效果会好一点。

Answer 3

你要想适配小屏幕，确实需要媒体查询，调整样式，你可以看一下途牛官网的适应。
有的时候复杂网站，不能用响应式框架，基本上都是这种方法。

Answer 4

你的悬浮框有多大？上个图，现在PC网页电脑适配1920和1366两个屏幕就可以了

Answer 5

如果1360属于你们考虑的范围，那么设计师设计的时候就要考虑这一尺寸，显然你们的设计师没有考虑。要兼容1360的话，主要有两种方式，1.让设计师不要固定安全宽度，使用百分比标注。 2.设计师出一份1360的设计稿，做响应式支持。

Answer 6

小屏1200也没问题

Answer 7

像你的这种问题；可以设计人员沟通；修改悬浮框的位置；或者让他再出一设计稿；用媒体查询适配小屏幕吧。

Answer 8

做响应式设计界面吧，在设计稿的基础上做兼容，不同的宽度显示不同的内容，现在bootstrap和大部分的网站都会做这样的响应式显示