RWD响应式网页设计是解决多尺寸屏幕问题的一个很好的解决方案，这需要从平面的角度克服许多困难。没有固定的页面大小，没有毫米或英寸，没有任何限制会让人觉得无从下手。随着构建网站的小工具越来越多，将网页设计限制在电脑版或手机版已经不再适用。因此，我们将阐明如何使用RWD响应式网页设计的基本原则来创建一个流畅的网页。为简单起见，我们将重点介绍布局。
响应式网页设计(Responsive) Vs 自适应网页设计(Adaptive)
这两种设计方法相辅相成，没有对错之分，具体情况看内容。
内容流
随着网页的屏幕尺寸越来越小，内容占据的垂直空间也越来越多，这就意味着网页的内容会向下延伸，这就是所谓的内容流。如果你习惯了用像素和点来设计，你可能会觉得这个有点难掌握。不过没关系，习惯了就好理解了。
相对位置 Relative units用户的网页显示可以是桌面屏幕、移动设备或两者之间的任何显示。像素要随屏幕大小而变化，所以需要能适应各种情况的灵活单元。相对于单位，百分比易于使用。50%的宽度意味着宽度占浏览器窗口大小的一半。
截断点 Breakpoints
断点可以在预设点使网页布局变形，也就是说桌面网页显示3列，移动设备网页只显示1列。大多数CSS属性可以在断点之间转换。断点的位置通常取决于网页的内容。例如，如果您想要换行，您可能需要添加断点。但是，断点需要谨慎使用。如果内容之间的逻辑关系不清楚，很容易搞得乱七八糟。
最大和最小值 Max width
在移动设备中，web内容有时会占据整个屏幕宽度，但如果同样的web内容在桌面机的屏幕上也是满的，则布局不合适。因此，设置最大/最小宽度。比如移动设备的宽度为100%，最大宽度为1000px，那么大屏幕的内容不会超过1000px。
巢状物件 Nested objects
如果一个网页的许多元素相互关联，将很难控制。因此，将元素放在容器中会使它们更加易于管理和简洁。静态单位(如像素)对于要缩放的内容(如徽标和按钮)很有用。
移动优先还是桌机优先 Mobile or Desktop first
网页从小屏幕转大屏幕(先移动)还是从大屏幕转小屏幕(先台式机)没多大区别。如果优先考虑手机的话，在网页设计上会有更多的限制需要考虑。通常双方都是同时起步，所以一定要考虑web用户的习惯和市场。
网页字体 vs 系统字体 Webfonts vs System fonts
网页中有很多字体，但这些字体都需要加载时间。单词越多，加载页面的时间就越长。系统字体加载速度快很多，用户本地有内置字体。
点阵图 vs 向量图 Bitmap images vs Vectors,你的照片有很多细节和华丽的效果吗？如果是这样，请使用位图。如果没有，考虑使用矢量图。如果是位图，使用jpg，png或gif。矢量图形使用SVG或图标字体。但是一定要注意文件的大小，没有优化的图片是不能传到网上的。矢量图形文件通常很小，但是一些旧的浏览器可能不支持矢量图形。如果图片有许多曲线，文件可能比位图大，所以要明智地选择。
鲁ICP备15001313号
鲁公网安备 37039402000105号