响应式网站设计基本布局原则

2021-10-02 作者:未知   |   浏览(

响应式网站设计对于解决多种类屏幕问题来讲是个很好策略,但从实质制作的角度来看,其却存在着不少的困难,没固定的页面尺寸、没毫米或英寸,没任何物理限制,被人感到无从下手。伴随打造网站可用的各种小工具愈加多,像素设计局限于桌面和手机端也已经成为历史,因此,目前就让大家来讲明一下怎么样运用响应式网站设计的各项基本原则来达成,而不是抗拒流畅的网页体验,为了容易起见,大家将着重讲布局。

1、响应式设计VS自适应网站设计

对于响应式设计和自适应网站设计看上去相同实则不然,这两种设计方法彼此相辅相成,所以,说也没对错之分,具体状况要依内容而定。

2、最大值和最小值

有时内容占满整个屏幕宽度(比如在手机上)是好事,但假如相同的内容在电视屏幕上也撑得满满的,貌似就不太合理了,这就是为何要有最大值或最小值,比如:假如宽度为100%,最大宽度1000px,那样内容就会以低于1000px的宽度填充屏幕。

3、Web字体VS系统字体

想让我们的网站拥有炫酷的Futura或Didot成效吗?那就是用web字体吧,尽管web字体看着非常炫酷,这部分字体都需要用户下载,字越多,用户加载页面的时间也就越长。

另一方面,系统字体加载速度则快得多(首要条件是用户本机就有),但太过一般。

4、内容流

伴随屏幕尺寸愈加小,内容所占的垂直空间也愈加多,也就是说,内容会向下方延伸,这就叫做内容流。

假如你习惯了用像素和点进行设计,可能会感觉这个有点难学会,不过没关系,习惯了就非常不错理解了。

5、位图VS矢量图

你的图标是不是有不少细则,并且应用了不少华丽的成效?若是,那就用位图;假如不是,考虑用矢量图。

若是位图,用jpg、png或gif;矢量图则最好用SVG或图标字体,其各有利弊,但你要时刻牢记图标尺寸——未经过优化的图片不可以传到网上。

另一方面,矢量图一般比较小,不过部分比较老的浏览器可能不支持矢量图,还有,假如图标有不少曲线,那大概会比位图还大。

6、断点

断点可以让页面布局在预设的点进行变形,也就是说,在台式桌面上显示3栏,在手机上仅显示1栏,大部分CSS属性都可以达成断点之间的变形。

断点放置的地方一般取决于内容,譬如,假如一句话要换行,你可能就需要加上断点,但断点用时需要小心——假如搞不清内容之间的逻辑关系,比较容易弄的一团乱。

7、嵌套对象

还记得相对地方吗?假如一大堆要点彼此都紧密联系,那样势必难以控制。

因此,将要点放置到容器中就会让它们变得愈加好理解,并且简单明快,这样的情况就需要用到像素之类的静态单位了,静态单位对于logo和按钮等无需扩展的内容来讲很有用。

8、相对单位

你的设计对象可能是台式桌面,也会是手机端屏幕或者介于两者之间的任意屏幕种类,像素密度也会彼此不同,所以大家需要用灵活可变,并且可以适应各种状况的单位。

那样,在这样的情况下,百分比等相对单位就派上用场了,用百分比时,大家说宽度50%就是表示宽度占屏幕大小(或者叫视区,也就是指所打开浏览器窗口的大小)的一半。

9、移动优先还是台式桌面优先

严格来讲,项目从小屏幕入手过渡到大屏幕(移动优先),还是从大屏幕入手过渡到小屏幕(台式桌面优先)不同不大。

但,从手机端着手可以给你带来一些额外的限制,帮你进行决策,一般情况下大伙会从两方面同时着手,所以,你还是要看哪种方法最好你。

现在,Web设计和开发范围进步非常快,有时大家会没办法跟上设施与分辨率改革的节奏,对于多数网站来讲,为每种新设施及分辨率创建其独立的版本根本就是不切实质的,结果就是,大家将会取得用某些设施的用户群,而失去那些用其他设施的用户。