响应式网页设计是解决多种类型屏幕问题的良好解决方案，但是从实际生产的角度来看，存在许多困难。 没有固定的页面大小，没有毫米或英寸，也没有物理限制。 人们感到无助。 随着越来越多的小工具可用于建设网站，像素设计仅限于台式机和移动设备，这是历史，因此，让我们解释一下如何使用自适应Web设计的基本原理来实现，而不是拒绝平滑的Web。 经验，我们将着重于简化布局。
一个
1.自适应设计与自适应网页设计
响应式设计和自适应网页设计似乎并不相同。 两种设计方法相辅相成，因此没有对与错，具体情况取决于内容。
一个
2.最大值和最小值
有时候，最好将整个屏幕宽度都填满（例如在移动设备上），但是如果电视上也显示了相同的内容，那么这似乎是不合理的，这就是为什么存在最大值或最小值的原因。 ：如果宽度为100％，最大宽度为1000像素，则内容将以不超过1000像素的宽度填充屏幕。
一个
3. Web字体VS系统字体
您想让您的网站具有酷炫的Futura或Didot效果吗？ 那就是使用网络字体，尽管网络字体看起来很酷，但是这些字体需要用户下载，单词越多，用户加载页面所需的时间就越长。
另一方面，系统字体加载速度要快得多（前提是用户拥有它），但这太普通了。
一个
4.内容流
随着屏幕尺寸变得越来越小，内容所占据的垂直空间越来越多，也就是说，内容将向下延伸，这称为内容流。
如果您习惯于使用像素和点进行设计，则可能会很难掌握，但这没关系。 如果您习惯了，这很容易理解。
一个
5.位图VS矢量
您的图标是否有很多细节并应用了很多华丽的效果？ 如果是，则使用位图。 如果没有，请考虑使用矢量图形。
如果是位图，请使用jpg，png或gif； 对于矢量图形，最好使用具有优点和缺点的SVG或图标字体，但是您应始终牢记未经图标优化的图片的大小无法传输到Internet。
另一方面，矢量图形通常较小，但是某些较旧的浏览器可能不支持矢量图形。 另外，如果图标有很多曲线，则它可能大于位图。
一个
6.断点
断点允许页面布局在预设点变形，也就是说，在桌面上显示3列，而在移动设备上仅显示1列。 大多数CSS属性可以在断点之间转换。
断点的位置通常取决于内容。 例如，如果您想打断一个句子，则可能需要添加一个断点，但是在使用断点时需要小心-如果您不了解内容之间的逻辑关系，则很容易获得A 一团糟。
一个
7.嵌套对象
你还记得相对位置吗？ 如果许多元素彼此紧密连接，将很难控制。
因此，将元素放置在容器中将使它们更易于理解，简单明了。 在这种情况下，您需要使用静态单位，例如像素。 静态单位用于徽标和按钮，不需要扩展。 这是非常有用的。
一个
8.相对单位
您的设计对象可以是台式机，也可以是移动屏幕或两者之间的任何屏幕类型，并且像素密度互不相同，因此我们需要使用灵活的单元并能够适应各种情况。 。
好吧，在这种情况下，诸如百分比之类的相对单位会派上用场。 当使用百分比时，我们说宽度为50％意味着该宽度占屏幕大小（或称为视口，是指打开的浏览器窗口的大小）的一半。
一个
9.移动优先级或桌面优先级
严格来说，项目是从小屏幕开始到大屏幕（移动优先级）还是从大屏幕开始到小屏幕（台式机桌面优先级）都没有太大的区别。
但是，从移动端开始可能会给您带来一些其他限制，以帮助您做出决策。 通常，每个人都将同时从双方开始，因此您仍然必须查看哪种方法最适合您。
一个
如今，Web设计和开发领域正在迅速发展，有时我们将无法跟上设备和分辨率创新的步伐。 对于大多数网站，为每个新设备和分辨率创建自己的版本根本不可行。 ，结果是我们将赢得某些设备的用户基础，而失去使用其他设备的用户。
一个
可能您还想看