响应式网站建设设计有哪九个基本原则?
响应式网站建设设计很好地解决了各种类型屏幕的问题,但从印刷的角度来看,它有很多困难。没有固定的页面大小,没有毫米或英寸,没有物理限制,让人感到很无奈。随着越来越多的小工具可用于构建网站,pixel设计仅限于桌面和移动。因此,现在让我们来解释一下如何使用响应式网页设计的基本原则,而不是抵制流畅的网页体验。为了简单起见,我们将重点放在布局上。
1.响应式设计与适应性设计
看起来一样,其实不是。两种设计方法相辅相成,没有对错之分。具体情况要看内容。
2.内容流
随着屏幕尺寸越来越小,内容占据的垂直空间越来越多,也就是内容会向下延伸,这就是所谓的内容流。如果你习惯于用像素和点来设计,你可能会发现这个有点难掌握。不过没关系。习惯了就好理解了。
3.相对单位
您的设计对象可以是桌面、移动屏幕或介于两者之间的任何屏幕类型。每英寸的像素也会彼此不同,所以我们需要使用能够适应各种情况的灵活单位。那么在这种情况下,百分比等相对单位就派上用场了。在使用百分比时,我们说50%的宽度是指宽度占屏幕大小(或视口,即打开的浏览器窗口的大小)的一半。
4.断点
断点可以使页面布局在预设点变形,即桌面显示三栏,移动设备只显示一栏。大多数CSS属性都可以实现断点之间的变形。断点放在哪里通常取决于内容。例如,如果一个句子需要换行,您可能需要添加一个断点。但是断点需要慎用——如果搞不清内容之间的逻辑关系,就很容易弄乱。
5.最大值和最小值
有时候内容占据整个屏幕宽度是好事(比如在移动设备上),但如果同样的内容在电视屏幕上也占满了,就显得不合理了。这就是为什么应该有一个最大/最小值。例如,如果宽度为100%,最大宽度为1000px,则内容将以不超过1000px的宽度填充屏幕。
6.嵌套对象
还记得相对位置吗?如果很多元素之间关系密切,就很难控制。因此,将元素放在容器中会使它们更容易理解和简洁。在这种情况下,需要像素等静态单位。静态单元对于不需要扩展的东西非常有用,比如logo和按钮。
7.移动还是桌面优先
严格来说,从小屏到大屏(移动优先)或者从大屏到小屏(桌面优先)的项目差别不大。但是从移动端牵手可以给你带来一些额外的限制,帮助你做决定。通常人们会同时从两个方面入手,所以你还是要看哪一个最适合你。
8.网络字体与系统字体
想让你的网站拥有酷炫的未来或迪多特效果吗?让我们使用网络字体。虽然web字体看起来很酷,但是你要记住,所有这些字体都需要用户下载。字数越多,用户加载页面的时间就越长。另一方面,系统字体加载速度要快很多(前提是用户本地有),但是太普通了。
9.位图与矢量图
你的图标是不是有很多细节,很多华丽的效果?如果是,那么使用位图。如果没有,可以考虑用矢量图。如果是位图,用jpg,png或者gif。矢量图形最好用SVG或者图标字体。各有利弊。但是你应该时刻记住图标的大小——未经优化的图片不能上传到网上。另一方面,矢量图形通常很小,但一些较旧的浏览器可能不支持矢量图形。此外,如果图标有许多曲线,它可能比位图大,所以要明智地选择。
推荐新闻
更多行业-
网站设计理念
网站设计的理念是什么?就是对所建网站的定位,这与主题有些区别,理念不但...
2014-07-08 -
稳定网站排名我们只需做好五大全要点
“打江山容易,守江山难”这句古语其实对于作为站...
2012-02-06 -
网站是网站推广的平台,网站建设要综合考虑多方因素
有客户认为建网站很简单,无非是找个网站设计软件,其实没那么简单的,如果...
2012-08-06 -
网上购物系统
你有没有想过坐在计算机前面.通过以标点击购买东西呢?如果你是老板.你有...
2014-06-27 -
企业网站建设需要注意的地方
无论是做个人网站建设,企业网站建设还是其他一些网站,在做之前一定要有一...
2021-11-05 -
集团网站建设哪家好?怎么选择?
集团网站就是在最近几年会成为很多企业比较关注的,因为在网站建设上,能够...
2022-10-13
预约专业咨询顾问沟通!
免责声明
非常感谢您访问我们的网站。在您使用本网站之前,请您仔细阅读本声明的所有条款。
1、本站部分内容来源自网络,涉及到的部分文章和图片版权属于原作者,本站转载仅供大家学习和交流,切勿用于任何商业活动。
2、本站不承担用户因使用这些资源对自己和他人造成任何形式的损失或伤害。
3、本声明未涉及的问题参见国家有关法律法规,当本声明与国家法律法规冲突时,以国家法律法规为准。
4、如果侵害了您的合法权益,请您及时与我们,我们会在第一时间删除相关内容!
联系方式:010-60259772
电子邮件:394588593@qq.com