2022-11-29
网页从小屏幕到显示屏(移动优先级)或从显示屏到小屏幕(桌面机器优先级)之间几乎没有区别。如果优先考虑行动端，在网页设计中将有更多的限制需要考虑。一般来说，这两个方面是同时开始的，所以我们仍然必须考虑网页用户的习惯和市场。
图标字体vs系统字体：
网页字体有很多化的，但这些字体需要加载时间。单词越多，加载界面的时间就越长。系统字体加载速度要快得多，用户的机器有这些字体。
点阵图vs向量图：
你的图片有很多细节，用了很多华丽的效果吗?如果是，请使用点阵图。如果没有，考虑应用向量图。如果是点阵图，就用它jpg，png或gif。应用向量图SVG或者图标字体。但是，应注意文件的大小。未经优化的照片不能在线传输。向量图的一般文件非常小，但一些较旧的浏览器可能不会帮助向量图。如果图片中有许多曲线，则文件可能具有较大的点阵图，因此应明智地选择。
在移动设备中，有时网页占据了整个屏幕的宽度，所以如果同一个网页在桌面屏幕上满了，布局就不合适了。因此，有一个总宽度较大/最小值的设置。例如，移动设备的总宽度为100%，最大宽度为10000px，显示屏内容将不超过1000px。
如果网页上的许多元素必须相互关联，它们将无法控制。因此，将元素放入容器将使其更好地管理，并且简洁明了。静态企业就像像像素一样。缩放内容是否非常有用，例如logo跟按键。
截断点：
断点可以在预设点变形网页布局。换句话说，桌机网页上显示3列，移动设备网页上只显示1列。CSS所有特征都能完成断点之间的变形。断点的位置通常取决于网页。例如，如果你想改变一个句子，你可能必须添加断点。但是，在使用断点时需要小心。如果你不能理解内容之间的逻辑关系，很容易把事情搞得一团糟。
相对位置：
用户的web显示屏可以是桌面屏幕、移动设备或两者之间的任何显示屏。像素必须随屏幕大小而变化，因此必须灵活适应各种情况。与企业相比，百分比应用得很好。总宽度为50%，表示总宽度占浏览器窗口大小的一半。
内容流：
随着屏幕的大小越来越小，内容占用了越来越多的垂直空间。换句话说，网页将向下延伸，这称为内容流。如果你习惯于使用像素和点来设计，你可能会发现这有点难以掌握。但这并不重要。如果你习惯了，这很容易理解。
