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

网站开发

Website development

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

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

TAGS:上海网站开发,网站开发

讲到响应式布局, 相信各位都有一定的知晓,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案。今天就和各位来讲讲响应式布局这件小事,包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎样设计(通 过CSS3 Media Query实现响应布局)。  bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

 bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngbY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

 bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

一、什么是响应式布局? bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

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

二、响应式布局有哪些优点和缺点?   bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

优点: bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

面对不同分辨率设备灵活性强   bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

能够快捷解决多设备显示适应难题 bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

缺点: 
bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  兼容各种设备工作量大,效率低下 bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  代码累赘,会出现隐藏无用的元素,加载时间加长 bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  本来这是一种折衷性质的设计解决方案,多方面因素影响而达不到效果   一定程度上改变了网站原有的布局结构,会出现客户混淆的情况 bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

三、响应式布局该怎样设计? bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

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

1、CSS中的Media Query(媒介查询)是什么? bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

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

2、media query能够获取哪些值? bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

设备的宽和高device-width,device-heigth显示屏幕/触觉设备。   渲染窗口的宽和高width,heigth显示屏幕/触觉设备。 bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

设备的手持方向,横向还是竖向orientation(portrait|lanscape)和打印机等。   画面比例aspect-ratio点阵打印机等。   设备比例device-aspect-ratio-点阵打印机等。   对象颜色或颜色列表color,color-index显示屏幕。   设备的分辨率resolution。   bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

3、语法结构及用法 bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules} bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

示例一:在link中使用@media:
bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

<link rel=“stylesheet” type=“text/css” media=“only screen and (max-width: 480px),only screen and (max-device-width: 480px)” href=“link.css”/> bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  上面使用中only可省略,限定于计算机显示器,第一个条件max-width是指渲染界面大宽度,第二个条件max-device-width是指设备大宽度。   bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

示例二:在样式表中内嵌@media:bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

 @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} bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

 在示例二中,设置了电脑显示器分辨率(宽度)大于或等于1024px(并且大可见宽度为989px);屏宽在480px及其以下手持设备;屏宽在 480px以及横向(即480尺寸平行于地面)放置的手持设备;屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。 bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

从上面的例子可以看出,字符间以空格相连,选取条件包含在小括号内,srules为兼容设置的样式表,包含在中括号里面。only(限定某种设备,可省略),and(逻辑与),not(排除某种设备)为逻辑关键字,多种设备用逗号分隔,这一点继承了css基本语法。 bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

4、可用设备名参数:    bY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

  blob.pngbY4上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

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

原文地址:/i,72,6296,0.html

客户评价

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

    潘涛

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

    谭娇

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

    陈曦

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

    张经理

联系方式

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

服务领域

  • 网站定制开发
  • PC网站设计
  • 域名邮箱
  • 网站维护
  • 网站二次开发
  • 响应式网站设计
  • 虚拟主机
  • 网站优化
  • 网站设计开发
  • 创意设计
  • 云主机
  • 项目合作

合作伙伴

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