易捷网络专注企业网站建设
11年企业网站建设经验、响应式网站建设,兼容PC、手机、平板全
终端,给你更佳的浏览体验...

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

来源:网站建设行业资讯网
添加时间:2021-12-08

为了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或图标字体。每个都有对应的优势和缺点。但是图片的大小也需要重视——网页上的图片需要经过优化。另一个方 面,矢量图通常比较小,但是一些旧版的浏览器不支持。此外,如果它有很多曲线的话,它也可能会比位图要重。所以,慎重选择。

网站建设计最新案例赏析:


上海艾艺信息技术网站制作首页设计效果图
上海艾艺信息技术
广东丰大机械科技网站制作首页设计效果图
广东丰大机械科技
上海傲秀展览展示网站制作首页设计效果图
上海傲秀展览展示
吴江正大纺织厂网站制作首页设计效果图
吴江正大纺织厂
佛山红海豚门业网站制作首页设计效果图
佛山红海豚门业
深圳大狮影业摄影广告网站制作首页设计效果图
深圳大狮影业摄影广告
东莞莲泉净水设备网站制作首页设计效果图
东莞莲泉净水设备
上海科宁会展服务网站制作首页设计效果图
上海科宁会展服务
东莞禾聚精密电子科技网站制作首页设计效果图
东莞禾聚精密电子科技
佛山市共宏纺织机械网站制作首页设计效果图
佛山市共宏纺织机械
 

网站建设行业资讯推荐阅读:


深圳怎么逐步建设属于自己的网站深圳网站建设怎么维护关键词排名为什么企业需要有自己的网站网站制作的五个基本要求SEO优化要掌握哪些技巧微信网站制作需要注意的事项高端网站建设需要个性化品牌定制软件定制开发差别大了解清楚再决定! 靠谱的网站设计模板制作专业定制 如何分析域名解析是否正确域名注册需要注意的问题企业网站建设需要注意的问题网站建设需要掌握那些知识技术网站设计首页四大关键点网页制作如何提升网站页面打开速度企业网站建造中存在哪些盲区不同类型网站设计的特点响应式网站建设有哪些要注意的标准企业在建设外贸网站时要了解哪些常识ApplePay逆袭:其实我只想静静的做一个卡包把握这种小技巧小白也可以当网页室内设计师通过前台设计,后台功能开发来简单的了解营销型网站建设深圳福田网站制作需要多少钱,大型网站制作要如何进行什么叫服务器租用网站建设行业实力更重要浅谈响应式网站建设的时候需要注意的图片处理技巧 网页页面设计哪家售后好 大型网站优化靠内链,小网站优化靠什么呢深圳网站维护--为什么要进行网站维护关于域名解析中常见问题分三步,网页设计让你牢牢抓住重点客户企业网站建设技巧心得有哪些深圳市网站建设必须的是学习和吸取经验企业网站设计如何提高客户信任度网站建设过程当中的SEO应用总结网络品牌的含义是什么-深圳网站设计分享企业做网站时如何完善网站设计布局房地产网站制做收费标准的差异在哪儿响应性网站设计背后的功能概念公司网站优化中遇到索引量下降时该如何处理易捷网络告诉你要怎么建设公司网站深圳网站建设不用怕,这些小技巧来帮你网站开发最重要的五个技巧浅析新创公司不能犯的5大营销错误网站优化:控制搜索引擎蜘蛛访问深圳网站优化要如何选择网站优化公司SEO网站优化策略有主题要明确,内容要丰富、引出链接要人气化等内容成功的企业网站设计怎么进行软件定制开发如何获取天使客户 服务专业的网站设计模板制作哪家不错 深圳网站设计教你打造创意魔幻的人皮面具使用时企业邮箱时客户发的邮件有时收不到是什么原因入门到专业!网站改版过程中应该注意的问题如何将企业网站设计成有品质有特色的网站呢企业网站建设应该如何防止被骗网站建设时站长要注意的几个问题网站设计中做好导航设计的几大因素网站建设单页面如何优化如何选择网站建设公司企业如何设计出让用户有好感的网站深圳网站设计小编简单解析Alexa排名用处
企业网站建设行业信息服务发布平台!
(www.fantodo.com)版权所有
QQ在线咨询