响应式网页设计的基本原则--上海网站建设|网站制作|网站优化公司-上海志勋网络科技有限公司

志勋网络与威固贴膜合作微网站建设项目

威固是美国加州韶华科技（Southwall）旗下的隔热膜品牌，自品牌诞生以来即立足于隔热膜高端市场，并结合市场的实际情况开发出一系列产品，已成为世界汽车隔热膜市场最具竞争力的品牌之
查看详情
志勋开发温州万象城活动网站并活动圆满成功

上海东方传媒集团有限公司（SMG ，原上海文广新闻传媒集团）由上海广播电视台发起出资成立，是台属、台控、台管的控股企业集团公司。
查看详情
网站建设留白设计让网站更清新简洁

对于进行上海网站建设来说，很多设计者喜欢将综合元素整合到一个页面当中，但是对于网页的整体排版来说，可谓是寸土寸金，因为一个网页的页面容量是有限的，所以说对于整个页面的内容填充来说，需要合理的整合，很多
查看详情

< >

响应式网页设计的基本原则

2018-03-23

很多的困难。没有固定的页面尺寸、没有毫米或英寸，没有任何物理限制，让人感到无从下手。随着建立网站可用的各种小工具越来越多，像素设计局限于桌面和移动端也已经成为历史。因此，现在就让我们来说明一下如何运用响应式web设计的各项基本原则来实现，而不是抗拒流畅的网页体验。为了简单起见，我们将着重讲布局。

响应式设计vs自适应网页设计

看似相同实则不然。这两种设计方式彼此相辅相成，所以说也没有对错之分。具体情况要依内容而定。

内容流

随着屏幕尺寸越来越小，内容所占的垂直空间也越来越多，也就是说，内容会向下方延伸，这就叫做内容流。如果你习惯了使用像素和点进行设计，可能会觉得这个有点难掌握。不过没关系，习惯了就很好理解了。

相对单位

你的设计对象可能是台式桌面，也可能是移动端屏幕或者介于两者之间的任意屏幕类型。像素密度也会彼此不同，所以我们需要使用灵活可变，并且能够适应各种情况的单位。那么在这种情况下，百分比等相对单位就派上用场了。使用百分比时，我们说宽度50%就是表示宽度占屏幕大小（或者叫视区，也就是指所打开浏览器窗口的大小）的一半。

断点

断点可以让页面布局在预设的点进行变形，也就是说，在台式桌面上显示3栏，在移动设备上仅显示1栏。大多数CSS属性都可以实现断点之间的变形。断点放置的位置通常取决于内容。比如，如果一句话要换行，你可能就需要加上断点。但断点使用时需要谨慎——如果搞不清内容之间的逻辑关系，很容易弄的一团乱。

上一篇:响应式网页设计的误区下一篇:网页设计如何定向返回目录