网页适应怎么做？
我是UI新人 刚入职，一直按照1920*1080的画布做web的设计图，但是前端敲出来的网页和我的设计图并不很符合，比如高度我设计的1080但他做出来的往往要高很多，需要滚轮浏览，还有如果用14寸的电脑看时，没法同步缩小，看起来很不舒服，这个是要我或者他去做？要怎么做？谢谢
- 电脑屏幕解析度也是 1920*1080，且浏览器全屏吗？还需要看显示的内容和设计稿是否一致，如果这些都符合前端做出来的仍然高很多，那就是前端的问题。另外浏览器的可视区域通常比电脑屏幕高度要小。
- 14英寸屏幕看时，「同步缩小」的说法太模糊了，通常 PC 端响应式网页设计不会整个网页所有文字、图片等等比例缩小，虽然这个技术上面可以实现。响应式设计是针对不同宽度屏幕采用不同的显示，而非简单所有变窄。比如文字变小，显示内容布局变化。
整个网站，乃至整个公司应该有一套设计规范，其中也包含常见的响应式设计处理，这个需要设计、前端双方多沟通协商。
关于响应式设计可以多参考其他人的经验，比如 uisdc 上面响应式设计相关文章，借鉴其他网站的响应式处理等。
你需要了解一下前端是如何把设计转化成页面的。
前端需要知道你设计的所有元素的值，如果是一个标题，这些属性值包括但不限于：字体、字型大小、行高、颜色、粗细、背景色、是否有装饰等等，对应这些属性是一些css代码：font-family, font-size ,font-weight, color , background, text-decoration ...等等。
影响实际效果的还有块模型和布局，你需要了解css盒子模型。你要知道除了你画出来可视的部分，那些间距、留白在页面里是如何实现的也要有清晰的认识——因为前端在处理这些效果的时候，他的理解和你的理解可能不一样。你理解两个块之间应该有个间距，比如 margin-bottom:30px；而前端可能是以整个块上下都间距margin:15px，这样两个块凑到一起的时候形成了30px的间距。
这只是一个简单的例子，用来说明页面是否能百分之百还原你的设计稿其涵盖非常多的细节。
而你的问题里能看出你可能并不理解这些内在原理，而在这个基础上，你又提了另一个更复杂的问题：响应式布局及屏幕宽度的兼容性。如果我没理解错，你还希望看到不同宽度下，某些元素的动态变化，比如缩小。这就需要你不仅仅提供某一个宽度下的视图设计稿。你要把所有可能的宽度下的效果体现出来。
也就是至少涵盖 pad 768px+、desktop 1024px+、 large-desktop 1200px+，等等若干个解析度下的效果。因为你不能保证用户浏览器是多宽，所以你要想到前面，对若干种宽度做不同效果的设计。
然后你要了解如何实现这些动态变化，一个常用的方法是css的媒体查询。具体的方法涉及前端的知识，你不必太关注细节，但你要告诉前端，768px~1024px的时候我要这个效果，1024~1200px我要这个效果——当然不是你说要就有，你还得提供设计稿、标注稿让前端对著来做。例如我之前一个项目的首页，为了做响应式效果就需要把所有的情况都提供给开发。
最好你还熟悉一下一些响应式的框架，熟悉，我的意思是不需要你去敲代码，但要了解原理，知道开发能够用这个框架实现什么样的效果。比如bootstrap，antdesign，诸如此类。
通过你的问题和我以上的说明。你大概应该明白了，这个锅如果让前端背他可能不背，可能得你（设计师）和前端一起背 。
个人意见，仅供参考，欢迎交流，http://yinyu.name
看了看俩前端回答的都很有偏向性啊！还原度有问题 你们在那找什么借口理由，适配也不对，这就是你们技术不行 净扯什么沟通 ，你有什么需求可以直接给UI提，这是ui沟通的问题？还原度这么差，菜就承认 如果你们需要不同尺寸的设计稿 ui完全可以提供 你们照著做不出来 要不就去提升技能 要不就别干了 甩什么沟通的锅？
还有 还原度、适配什么的 让测试去测 有问题 测试反馈给前端
首先, 兼容大屏小屏, 这个设计前要有所了解, 比如, 主流用户的设备解析度是多少, 要兼容到多少?
如果真要兼容不同解析度, 那设计师确实需要考虑
如果设计图跟实物不符, 应该协商调整.
自适应这个两者都应该考虑到, 并协商调整.
具体情况我本人并不清楚, 所以不太好评论
不过我觉得工作就是协商和沟通. 这个不是谁的问题, 是大家的问题.
有时候没那么多是非对错, 是谁的问题, 世界是灰色的
rem 移动端适配方案?mp.weixin.qq.com
可以看看这个
先说你一两句
设计前，你就本能没有考虑过不同显示器状态下 最终设计应该呈现的效果；
设计图初期，你就应该有个大致的框架，
1024 1440 1920，不同显示器就应该有对应的呈现效果
其实一个合格的UI，还应该考虑手机、iPad不同情况下呈现；
至少在设计规范交付时也应该有注明；这样前端开发才好做下一步的工作；
其二：
你设计高度1080？这是哪个老师教你的？
你难道不知道浏览器有状态栏吗？
不同浏览器的状态栏高度还不一样；你这样搞没有下拉滚动条才怪；
另外：说下前端开发，也忒不专业了，一个合格的前端，至少能想到等比例缩放；
如果是PC端的网页的话。在设计稿方面（就是你的工作），一般会分为两类内容。有效区域和自适应区域。
1.有效区域
有效区域的内容就是需要设计稿适配到解析度最小的屏幕（具体多大根据公司需求）。现在比较惯用的有效区域宽度尺寸为1200像素。这1200像素的内容始终显示在屏幕的水平居中位置。如果用户的屏幕尺寸大于1200，则有效区域的两侧会出现留白。如果屏幕尺寸小于1200，则屏幕可横向滚动。你的工作就是有效区域在设计稿的水平居中位置，两侧留白即可。2.自适应区域自适应区域一般是跟随屏幕宽度变化，就是屏幕不论多宽，自适应区域的左右边界始终是和屏幕的左右边界对齐的。你这里只需要将该区域的左右边界对齐设计稿的左右编辑对齐即可。支付如何跟随屏幕尺寸变化，就是前段的工作了。想企业官网的抬头，轮播图，这些一般都属于自适应区域。这些其实你多浏览些优秀的网站，然后结合自己公司的需求，并不难确定。
推荐阅读：
