欢迎您加入草根网站目录: 提交网站流程 -> 注册会员 -> 提交网站 -> 等待审核...
数据统计:1225个主题分类,2203个优秀站点,431个站点正在排队审核,45600篇站长资讯
网站快速审核仅需10元/站,联系:点击这里给我发消息
当前位置:草根网站目录 » 站长资讯 » 站长资讯 » 行业资讯 » 文章详细 订阅RssFeed

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

来源:草根网站目录 浏览:38次 时间:2017-10-12

.
    响应式网页设计对于解决多类型屏幕问题来说是个不错方案,但从实际制作的角度来看,其却存在着很多的困难,没有固定的页面尺寸、没有毫米或英寸,没有任何物理限制,让人感到无从下手。随着建立网站可用的各种小工具越来越多,像素设计局限于桌面和移动端也已经成为历史,因此,现在就让我们来说明一下如何运用响应式网页设计的各项基本原则来实现,而不是抗拒流畅的网页体验,为了简单起见,我们将着重讲布局。
    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设计和开发领域发展很快,有时我们会无法跟上设备与分辨率革新的步伐,对于多数网站来说,为每种新设备及分辨率创建其独立的版本根本就是不切实际的,结果就是,我们将会赢得使用某些设备的用户群,而失去那些使用其他设备的用户。 本文章“草根网站目录 www.571517.com”编辑收录

转载请注明-原文链接:响应式网页设计基本布局原则

推荐站点

  • 草根新闻网草根新闻网

    草根新闻网为您提供最新、最全面的国际实时新闻,国际最新军事动态,浏览最新明星娱乐动态,最新游戏资讯就上草根新闻网.

    news.571517.com
  • 包双龙包双龙

    包双龙著名易学专家、堪舆学家,以最专业的风水知识,教你从风水学入门了解家居风水如何布局改运、办公风水调理催财、墓地风水等易学知识,为大家服务,传承和弘扬华夏传统文化。

    baoshuanglong.cn
  • 深圳博学IT实训学校官方网站深圳博学IT实训学校官方网站

    深圳博学IT实训学校是全国IT职业教育领导品牌,具备强大的师资,环境佳学习氛围好,0基础入学,高薪就业,全国免费电话:400-699-8683,学IT就到博学IT学校!

    www.0755bx.com
  • 随君游随君游

    随君游,一个分享旅游乐趣的网站!为广大网友带来海量的旅游景点、旅游攻略、旅行游记、民俗风情等精彩内容,从中感受旅游的乐趣.随君游,值得信赖的旅游资讯分享门户

    www.suijunyou.com
  • 666网址目录666网址目录

    666网址目录旨在为搜索引擎和网友提供数据参考,免费收录各类优秀网站,为站长带来优质链接和流量.纯绿色站点不含任何插件、弹窗、及误导性的广告,代码精炼快捷.欢迎广大站长和网友使用本站作为主页!

    www.dir666.com
  • 51时尚女人51时尚女人

    柔情绰态,媚于语言。奇服旷世,骨像应图。披罗衣之璀粲兮,珥瑶碧之华琚。戴金翠之首饰,缀明珠以耀躯。

    www.51nvren.cc