2017自适应设计断点值和代码段参考-供个人使用

WebDesign: 2017年最新的响应式设计断点值和代码段参考

我相信许多网页设计师对响应式设计有很多困惑. 设计草图尺寸？解析度？ CSS样式？等等，这很正常. 网页的快速发展和电子设备的不断涌现导致设计工作量的巨大增加. 有一阵子，您必须与PC，Android，Apple响应式设计代码，平板电脑，smartwatch兼容，并且感觉就像人崩溃了. 但是，确实如此. 对于简单的Web界面设计，我们不需要考虑过于复杂的响应能力，因为响应能力取决于前端工程师！但是我们不能忽略这一点. 如果您是一个团队，那么前端开发人员将把您杀死. 如果前端开发人员是姐妹，也许您会让别人哭泣. 以前，我还提供了一组免费的公共课程，详细说明了响应能力，规模，解决方案和其他问题，但是仍然存在许多缺陷和不准确之处. 经过一年多的打磨，我在这里进行了整理和总结. 良好的数据和使用技巧.

好吧，不用多说，设计一个Web界面并设置一个标准尺寸，包括响应尺寸. 实际上响应式设计代码，这很容易. 使用Photoshop CC高版本，可以在直接创建文件时选择不同设备的大小. 设计精度.

当然，如果您不使用默认的Photoshop尺寸，则可以参考下表设置尺寸. 表中列出的尺寸是网页设计中常用的尺寸参考，但不是全部. 响应式设计对于初学者来说是非常复杂的知识，即使对于经验不足的老手来说，也是相对难以学习的. 基本的响应式规范很容易学习，但是在项目中实际使用时并不方便. 这是一个过程. 如果您在努力学习下表，请不要着急，自己动手实践，并慢慢找出响应断点的含义. 以下数据未在任何项目中固定使用. 还需要根据特定的项目设计计划和项目使用的前端开发框架来考虑特定的响应断点值.

好的，本文的核心内容即将到来. 设计是一件小事. 真正的大事是前端开发如何使您的设计草案支持响应能力. 这需要根据互联网和世界的当前状态使用各种设备. 情况取决于各种设备的尺寸分辨率. 有很多文章. 在许多情况下，有必要完全符合该标准的所有设备. 工作量非常大. 我相信每个开发者都负担不起. 而且，开发人员必须考虑浏览器兼容性，这甚至更加困难. . 我自己总结的两张表是最常用的参考值，也参考了W3C的一些权威值，包括大小，分辨率，CSS媒体查询代码段等核心值. 在编写前端时，我还不断探索如何兼容并满足许多主流设备的屏幕尺寸. 我还需要减少前端开发的工作量，提高前端开发响应的效率.

如果您访问Google或百度，则可以找到很多响应式CSS代码，复杂的，简单的代码和不同的标准. 实际上，我经常寻找学习的材料，这很令人头疼. 但是最后，您必须在特定的项目中实践所学的知识，然后才能知道什么是最佳使用和什么是最佳使用. 我尝试按照以下原则组织这些CSS代码:

这是一个很长的工作. 我已经积累了很长时间，并且练习了很多. 我已经开发了一个支持响应性的框架或插件，因此我将在这里共享它，尤其是CSS代码段. 我相信所有前端开发都将为您带来帮助，您不必遵循我的参考，但您可以理解它们的含义. 让我们看一下我在开发前端时使用的响应代码（网站使用或不使用前端框架时自定义样式表的交叉引用）:

a）常用于图像流

@media all和（最大宽度: 1690px）{...}

@media all和（最大宽度: 1280像素）{...}

@media all和（最大宽度: 980px）{...}

@media all和（最大宽度: 736px）{...}

@media all和（最大宽度: 480px）{...}

b）通常用于稍微复杂的基本响应

@media all和（最小宽度: 1200像素）{...}

@media all和（最小宽度: 960px）和（最大宽度: 1199px）{...}

@media all和（最小宽度: 768像素）和（最大宽度: 959像素）{...}

@media all和（最小宽度: 480像素）和（最大宽度: 767像素）{...}

@media all和（最大宽度: 599px）{...}

@media all和（最大宽度: 479px）{...}

c）基于Bootstrap 3.x全球主流框架

@media all和（最大宽度: 991px）{...}

@media all和（最大宽度: 768像素）{...}

@media all和（最大宽度: 480px）{...}

d）基于Bootstrap 4.x全球主流框架

@media all和（最大宽度: 1199px）{...}

@media all和（最大宽度: 991px）{...}

@media all和（最大宽度: 768像素）{...}

@media all和（最大宽度: 575px）{...}

e）基于Material Design Lite（MDL）的材料设计框架

@media all和（最大宽度: 1024像素）{...}

@media all和（最大宽度: 839px）{...}

@media all和（最大宽度: 480px）{...}

f）常用于视网膜屏幕图像适配（@ 2x）

@media（-webkit-min-device-pixel-ratio: 1.5），（min-moz-device-pixel-ratio: 1.5），（-o-min-device-pixel-ratio: 3/2 ），（最小分辨率: 1.5dppx）{...}

今天的分享在这里. 如果您喜欢我的分享，并且以后关注我的博客，我将不时总结并分享一些干货. 希望对您有帮助: ）

该文章首次在Medium（英文版）上发布，并同时在我的博客（中文版）上发布

本文中提到的数据，文本和表格将在我即将出版的新书中进行详细说明. 如果您有兴趣，请继续关注: ）

推荐

要重新考虑响应性并更深入地了解响应式设计，请参阅本文

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-206306-1.html