企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站开发

Website development

北京网站设计开发云智响应式布局的优点和缺点设计方案

发布时间:2015-12-31 09:51:10

TAGS:北京网站开发,网站开发

讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计(通 过CSS3 Media Query实现响应布局)。  g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

 g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngg2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

 g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

一、什么是响应式布局? g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。   响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。  g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

二、响应式布局有哪些优点和缺点?   g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

优点: g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

面对不同分辨率设备灵活性强   g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

能够快捷解决多设备显示适应问题 g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

缺点: 
g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  兼容各种设备工作量大,效率低下 g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  代码累赘,会出现隐藏无用的元素,加载时间加长 g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  其实这是一种折衷性质的设计解决方案,多方面因素影响而达不到效果   一定程度上改变了网站原有的布局结构,会出现用户混淆的情况 g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

三、响应式布局该怎么设计? g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  我们在上面了解了什么是响应式布局,那在我们的实际项目中应该怎么去设计呢?在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰,现在还要来个不同尺寸设备,我们该怎么淡定下来呢?有需求就会有解决方案,呵呵,说到响应式布局,就不得不提起CSS3中的Media Query(媒介查询),这可是个好东西,易用、强大、快捷„„Media Query是制作响应式布局的一个利器,使用这个工具,我们可以非常方便快捷的制造出各种丰富的实用性强的界面。接下来就一起来深入的了解Media Query。  g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

1、CSS中的Media Query(媒介查询)是什么? g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受 min和max用于表达”大于或等于”和”小与或等于”。如:width会有min-width和max-width媒体查询可以被用在CSS中的 @media和@import规则上,也可以被用在HTML和XML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设 备,将会运用更加的广泛。  g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

2、media query能够获取哪些值? g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

设备的宽和高device-width,device-heigth显示屏幕/触觉设备。   渲染窗口的宽和高width,heigth显示屏幕/触觉设备。 g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

设备的手持方向,横向还是竖向orientation(portrait|lanscape)和打印机等。   画面比例aspect-ratio点阵打印机等。   设备比例device-aspect-ratio-点阵打印机等。   对象颜色或颜色列表color,color-index显示屏幕。   设备的分辨率resolution。   g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

3、语法结构及用法 g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules} g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

示例一:在link中使用@media:
g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

 g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  上面使用中only可省略,限定于计算机显示器,第一个条件max-width是指渲染界面大宽度,第二个条件max-device-width是指设备大宽度。   g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

示例二:在样式表中内嵌@media:g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

 @media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules} g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

 在示例二中,设置了电脑显示器分辨率(宽度)大于或等于1024px(并且大可见宽度为989px);屏宽在480px及其以下手持设备;屏宽在 480px以及横向(即480尺寸平行于地面)放置的手持设备;屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。 g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

从上面的例子可以看出,字符间以空格相连,选取条件包含在小括号内,srules为兼容设置的样式表,包含在中括号里面。only(限定某种设备,可省略),and(逻辑与),not(排除某种设备)为逻辑关键字,多种设备用逗号分隔,这一点继承了css基本语法。 g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

4、可用设备名参数:    g2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  blob.pngg2P北京网站设计开发,小程序开发,公众号,微信开发-云智互联

原创不易,未经授权,严禁转载

原文地址:https://www.yzlink.cn/i,72,6296,0.html

客户评价

更多+
  • 感谢云智互联,系统提前完成,在整个项目周期内,云智互联对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的云智互联团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。如果想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的云智互联(北京)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,重点是响应速度蛮快,有什么问题都会马上给你解决,公司很满意,因为他们都是针对每个项目建了相应的讨论组,有问题可以再里面提出,人员分工到位,解决问题很及时。

    张经理

联系方式

工作时间:10:00-19:00
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

合作伙伴

All Rights Reserved.©2010-2016 YZLINK.CN 京公网安备 110105019435 京ICP备14020656号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:北京市辉瑞律师事务所。
嘿,我来帮您!