响应式网页如何设计的协调？
来源：
咕咕问
2016-07-16
这个是我现在在做的，做了一天多，就做了这个栏目，三个图现在还没做完，
主要的疑惑就是怎么样才能显示的协调，不别扭。
比如：标题和内容的间距，查看更多按钮和内容的间距
我使用gogle浏览器试调工具调整宽度去看，试调的时候宽度是连续性的进行变化，总有一种分辨不出该在哪个屏幕宽度的时候设置断点，修改间距？ 尤其是有时候看着感觉都挺好的，但在看看感觉都不好。 而且我发现我现在越改越不协调了？ 该怎么办 在线等
还有一个就是 如果像我这样子写 该怎么样做能够提升一下效率 字体已经用vw设置了
但是页面在不同屏幕尺寸的时候一行显示一张图，两张图，三张图，而且后面的hot products 在480设置了隐藏，因此还要调，有没有什么简单快捷的办法
还有一个就是视口的距离，我是用pc在调，虽然屏幕宽度可以调整，但是爪机，平板使用时候的时间距离（脑袋到屏幕的距离）是不一样的，这样子显示效果会不会与真实的效果有出入？如何尽量减少这样的问题？ 并且有些爪机浏览器还会自带一些浮动的button，我用的百度浏览器他就自己带了一个，会不会跟网页上的浮动元素向冲突 （相互叠加），该怎么避免或者解决这个问题？
1回答
-
你这里说的显示协调，不别扭，这些主要是设计和用户体验的问题，如果你感觉不协调，需要先在设计层面考虑好行距、间距、图片大小和比例、字体大小等等，如果一边写代码一边调整，改一点，刷新一下页面看是否协调，然后再改，肯定效率会低一些。
不用所有的分辨率都特别协调，这一般也做不到，每个人审美也不一样，针对主流的设备进行设计，比如移动端就针对 iphone 6 进行设计，其他的设备在这个设计的基础上进行匹配和适应，是比较快捷的方式。
最终的实现，还是依赖样式的撰写，没有太好的方法。可以把单位设置成百分比，vw，vh之类的相对单位，并且善用min和max之类的限制，不至于过大或过小。
最后说的百度浏览器不太清楚，一般浏览器自带的浮动按钮都在页面之上，会覆盖页面元素，一般都可以隐藏的吧，真的在意的话避开位置就行。
022016-07-19
相似问题