上海网站建设公司上海网站建设公司

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

查看次数:475 2021-02-28

为了desktop和mobile单独使用像素设计的方法也成为了过去,因为越来越多的设备都可以打开网站。因此,我们需要弄清楚响应式网页设计 的一些基本原则,接受流体网页,而不是与之相抗。为了让它保持简单,我们将着眼于布局(是的,响应式比它更复杂,如果你想了解更多,这是一个很好的开端。)


响应式 vs 自适应网页设计


它们看起来似乎是相同的,但事实并非如此。这两种方法相辅相成,并没有说哪个是正确的那个是错误的,内容决定一切。


内容流动


随着屏幕尺寸变小,内容将会占据更多的垂直空间,而下方的内容就会被接着往下推,这就是所谓的流动。如果你是使用像素和磅来进行设计的,这可能会有点棘手,但是当你习惯了之后,就会变得很有意义了。


相对单位


画布大小可以是desktop、mobile或是它们之间的任何尺寸。像素密度也可以有所不同,所以我们需要灵活的、在各种屏幕上都可以使用的单位。这就是相对单位(如百分比)派上用场的时候了。所以设置50%的宽度也就意味着它会占据屏幕(或视图,即打开的浏览器窗口的尺寸)的一半。


断点


断点允许布局在预定义的点改变。例如:desktop屏幕上有3列,但是在mobile上只有一列。大多数CSS属性可以根据断点改变。通常你会根据具体的内容来设置断点。如果一个句子超过了屏幕长度,你可能就需要为其添加一个断点。但是使用断点是需要谨慎——当它很难理解什么内容会影响什么内容的时候,它可能会迅速地导致混乱。


网站设计


最大值和最小值


有时候,如果内容占据了屏幕的整个宽度是很好的,比如在移动设备上。但是如果是在电视屏幕上,相同的内容,占据了你的屏幕整个的宽度,通常就意义不大了。这就是Min/Max值发挥作用的时候了。比如说,设置width为100%,然后max-width是1000px,那么内容会填满屏幕,但是不会超过1000px。


嵌套对象


还记得相对位置吗?让很多元素的位置依赖于其它元素来定位是很难控制好的,因此使用容器来包裹元素可以让它更易理解,也更整洁。这就是静态单位(比如像素)发挥作用的时候了。对于你不想要模块化的内容(比如logo或按钮),它们是有用的。


Mobile优先 还是Desktop优先


从技术上讲,如果一个项目是从一个较小的屏幕开始,变成较大的屏幕(mobile优先),还是反过来(desktop优先),并没有太大的差别。然 而它还是增加了额外的限制,可以帮助你决定是否从mobile优先开始。通常大家在一开始的时候都会两端一起写,所以,还是看看哪个运行起来更好。


网页字体 vs 系统字体


希望你的网站上有很酷的Futura或Didot字体吗?可以使用网页字体!虽然它们看起来非常棒,但是记住字体放得越多,你加载页面的时间也会越长。在另一方面,加载系统字体确是快如闪电,但当用户本地没有这套字体时,它就会返回默认的字体。


位图 vs 矢量图


你是否想过在图标上添加很多的细节和花哨的效果?如果想过的话,使用位图比较合适。如果没有,可以考虑使用矢量图。对于位图,使用的是jpg、png或gif格 式的图像,而对于矢量图,较好的选择是SVG或图标字体。每个都有对应的优势和缺点。但是图片的大小也需要重视——网页上的图片需要经过优化。另一个方 面,矢量图通常比较小,但是一些旧版的浏览器不支持。此外,如果它有很多曲线的话,它也可能会比位图要重。所以,慎重选择。



【声明:信息来自网络,如有侵权,联系既删。】
推荐新闻

如何评估网站的效果_建站百科

2024-04-22

评估网站的效果是一个综合性的过程,涉及多个关键指标和因素。以下是一些建议,帮助您全面评估网站的效果: 流量分析:

网站制造中使用CSS改进网站访问性

2024-04-22

在网站制作中,CSS(层叠样式表)的使用不仅可以美化网站的外观,还能显著提高网站的访问性(可访问性)。通过CSS,你可以更好地控制网站

网站制造公司:一个好网站的策划设计

2024-04-22

一个好的网站策划设计,通常需要综合考虑多个因素,以确保网站不仅外观美观,而且功能齐全、用户体验良好。以下是一些关键步骤和要素:

第二届山东新高地电商供应链基地展销会在嘉祥县开幕

2024-04-22

第二届山东新高地电商供应链基地展销会在嘉祥县的开幕,标志着这一地区在电商领域的发展又迈出了坚实的一步。作为山东省的重要城市,嘉祥县近年

网站建设公司:网站制造前的建议

2024-04-18

在开始网站制作之前,作为网站建设公司,我们有以下几点重要建议: 首先,明确网站建设的目标与定位。您需要考虑网站的目的是什么

如何选择适合的建站服务器

2024-04-18

在选择适合的建站服务器时,需要考虑多个方面以确保满足网站的需求和预算。以下是一些建议,帮助你做出明智的选择: 硬件

返回顶部

TOP

QQ客服

QQ客服

上海网站制作公司:电话:021-67637587

021-67637587

开杰做网站
上海网站设计公司 上海网站设计公司

Are you ready?


您准备好了吗?我们时刻准备就绪!

我们专注:网站策划设计、网络多媒体传播、网站优化及网站营销、品牌策略与设计
主营业务:网站建设、企业邮箱、网站优化、域名注册、虚拟空间

期待您与我们联系!您的咨询,是对我们极大的鼓励和支持,也是我们共赢美好未来的开始! 更感谢您对我们的关注与信赖……

您也可通过下列途径与我们取得联系:

电 话: 021-67637587,13817759102 (微信同号)

电 话: 15900942493 (微信同号)

QQ: 632248744 , 273657225

邮 箱: service@kj021.com

地 址: 上海市松江区荣乐东路2369弄绿地大厦309室

地 址: 上海市闵行区(莘庄)友情路50弄15号1302室

上海网站建设
上海网站建设

上海开杰信息技术有限公司

电话:021-67637587 15900942493(微信同号)

地址:上海市松江区荣乐东路2369弄绿地大厦309室

地址:上海市松江区荣乐中路228弄104号202室

上海开杰信息技术有限公司 上海网站建设 电话:021-67637587

地址:上海市松江区荣乐中路228弄104号202室

地址:上海市闵行区(莘庄)友情路50弄15号1302

沪公网安备 沪公网安备 31011702001626号 沪ICP备12017671号-4

上海开杰信息技术有限公司松江分部

电话:021-67637587 15900942493

地址:上海市松江区荣乐中路228弄104号202室

上海网站设计公司