您所在的位置: 首页>行业资讯>山东响应式网页设计基本布局原则

山东响应式网页设计基本布局原则

发表于:2021-10-22 阅读:0 关键词: 响应 网页设计 基本 布局 原则 响应 网页设计 对于 解决 行业新闻
响应式网页设计是解决多种类型屏幕问题的良好解决方案,但是从实际生产的角度来看,存在许多困难。 没有固定的页面大小,没有毫米或英寸,也没有物理限制。 人们感到无助。 随着越来越多的小工具可用于建设网站,像素设计仅限于台式机和移动设备,这是历史,因此,让我们解释一下如何使用自适应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设计和开发领域正在迅速发展,有时我们将无法跟上设备和分辨率创新的步伐。 对于大多数网站,为每个新设备和分辨率创建自己的版本根本不可行。 ,结果是我们将赢得某些设备的用户基础,而失去使用其他设备的用户。   一个