020-29815005
预约专线时间:09:00-23:59

响应式网页设计的9条基本规范

新闻来源:本站 日期:2021-07-15
回应性网页设计是一种解决多屏幕问题的好方法,但是从印刷的角度来看还是比较困难的。版面大小不定,没有毫米或英寸,没有任何物理限制,无可挑剔。
   对于desktop和mobile来说,只用像素设计已经成为过去,因为越来越多的设备可以打开网站。所以,我们需要找出应答网页设计的一些基本原则,接受流体网页,而不要去对抗它。要保持简洁性,我们会检查布局(是的,响应式比这个复杂得多,如果你想知道更多的话,这是个不错的开始。)

    1、回应性vs自适应网页设计。

    他们看上去似乎是一样的,其实不然。两者是相互补充的,没有说哪对哪对是错,而内容决定一切。

    2、内容流动。

    当屏幕变小时,内容将占据更多的垂直空间,而下面的内容则继续向下推,这就是所谓的流动。假如你是用像素和磅来做设计,那可能会有些麻烦,但当你习惯了之后,它就变得很有意义了。

    3、相对单位。

    canvas可以是desktop、mobile或两者之间的大小。象素密度也可以不同,所以我们需要灵活的、可用于各种屏幕的单元。这时,相对单位(例如百分比)就可以派上用场了。因此,设定50%的宽度也意味着它将占据屏幕(或者是打开浏览器窗口的大小)一半。


设计


    4、断点。

    断点允许在预定义点处更改布局。比如:desktop屏幕上有3列,但mobile中只有一列。大部分CSS属性可以基于断点更改。一般情况下,你会根据具体内容设置断点。假如某句话的屏幕长过长,你可能需要加断点。但使用断点是需要小心的——当内容难以理解哪些内容将影响什么时,它可能很快造成混乱。

    5、最大值和最小值。

    有时,如果内容占用了屏幕的全部宽度,就可以了,比如在移动设备上。但如果是在电视屏幕上,同样的内容,占据了整个屏幕的整个宽度,通常意义不大。这时,Min/Max值就可以开始工作了。例如,将width设置为100%,然后max-width就是1000px,这样内容就会填充屏幕,但不会超过1000px。

    6、嵌套对象。

    记住相对位置是什么?使许多元素的位置依赖于其他元素来定位是很难控制的,所以用容器来包裹元素会使其更容易理解和清晰。这样,静态单位(比如像素)就该发挥作用了。如果您不想要模块化的内容(例如logo或按钮),它们很有用。

    7、Mobile优先还是Desktop优先。

    在技术上,如果一个项目是从一个更小的屏幕开始,然后变成更大的屏幕(mobile优先),还是换个屏幕(desktop优先),差别不大。但是,它增加了一些限制,帮助您决定是否从mobile优先开始。一般人一开始会把两个头一起写,所以,还是看看哪一个更好。

    8、网页字体vs系统字体。

    但愿你的网站上有Futura或者Didot的很酷的字体?网页字体可用!尽管他们看起来很棒,但请注意,字体放得越多,页面加载的时间就越长。然而,装入系统的字体确实快得像闪电一样,但是当用户没有这套字体时,它返回默认字体。

    9、位图vs矢量图。

    有没有想过给图标增加太多的细节和华丽的效果?假如想要的话,用位图比较合适。否则,考虑使用矢量图。位图使用jpg、png或gif格式的图像,而对于矢量图,最好选择SVG或图标字体。每一个都有相应的优点和缺点。但图片的大小也要注意——网页上的图片必须被优化。另一方面,矢量图通常比较小,但一些老版本的浏览器不支持。而且,如果它有很多曲线,那么它也可能比位图更重。因此,谨慎选择。