近年响应式设计&＃xff08;Responsive Design&＃xff09;很受关注&＃xff0c;随着移动互联网的迅速发展&＃xff0c;移动设备屏幕的多样性。设计师提出了响应式布局的设计方案。这里将概要与大家分享包含&＃xff1a;什么是响应式布&＃xff1f;响应式布局的优点和缺点以及响应式布局该怎么设计&＃xff08;通过CSS3 Media Query实现响应布局&＃xff09;&＃xff1f;
一. 什么是响应式布局&＃xff1f;
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念&＃xff0c;简而言之&＃xff0c;就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验&＃xff0c;而且随着目前大屏幕移动设备的普及&＃xff0c;响应式设计将是一个优秀的UI解决方案。随着越来越多的设计师采用这个技术&＃xff0c;我们不仅看到很多的创新&＃xff0c;还看到了一些成形的模式。
二. 响应式布局有哪些优点与缺点&＃xff1f;
新事物新技术的出现&＃xff0c;会使得很多人盲目跟从&＃xff0c;而不会去思考是否真正符合自己当前条件和需求。所以有必要先让它按位入座。
优点&＃xff1a;
能够灵活的适应不同分辨率设备&＃xff1b;
一定程度上解决一个页面多个版本维护&＃xff0c;制作成本&＃xff0c;效率&＃xff1b;
缺点&＃xff1a;
兼容各种设备工作量大&＃xff0c;效率低下
代码累赘&＃xff0c;会出现隐藏无用的元素&＃xff0c;加载时间加长
其实这是一种折衷性质的设计解决方案&＃xff0c;多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构&＃xff0c;会出现用户混淆的情况
三.响应式布局该怎么设计&＃xff1f;
目前主流的响应式前端CSS框架有很多&＃xff0c;这里我们将介绍一个易用&＃xff0c;自定义&＃xff0c;快捷的&＃xff08;CSS3中&＃xff09;Media Query&＃xff08;媒体查询&＃xff09;这一利器。使用这个工具&＃xff0c;可以非常方便快捷的制作出&＃xff0c;符合自己需求的界面。下面我们来一起了解Media Query.
1.CSS中的Media Query &＃xff08;媒体查询&＃xff09;为何&＃xff1f;
通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受 min和max用于表达”大于或等于”和”小与或等于”。如&＃xff1a;width会有min-width和max-width媒体查询可以被用在CSS中的 &＃64;media和&＃64;import规则上&＃xff0c;也可以被用在HTML和XML中。通过这个标签属性&＃xff0c;我们可以很方便的在不同的设备下自定义界面风格与布局&＃xff0c;特别是移动设 备&＃xff0c;将会运用更加的广泛。
2.媒体介质类型&＃xff1a;
设备的宽和高device-width&＃xff0c;device-heigth显示屏幕/触觉设备。
渲染窗口&＃xff08;视口&＃xff09;的宽和高width&＃xff0c;heigth显示屏幕/触觉设备。
设备的手持方向&＃xff0c;横向还是竖向orientation&＃xff08;portrait|lanscape&＃xff09;和打印机等。
画面比例aspect-ratio点阵打印机等。
设备比例device-aspect-ratio-点阵打印机等。
对象颜色或颜色列表color&＃xff0c;color-index显示屏幕。
设备的分辨率resolution。
3. 语法结构及用法
语法结构&＃xff1a;
&＃64;media 设备名 only &＃xff08;选取条件&＃xff09; not &＃xff08;选取条件&＃xff09; and&＃xff08;设备选取条件&＃xff09;&＃xff0c;设备二{sRules}
示例一&＃xff1a;在link中使用&＃64;media&＃xff1a;
css” media&＃61;“only screen and &＃xff08;max-width&＃xff1a; 480px&＃xff09;&＃xff0c;only screen and &＃xff08;max-device-width&＃xff1a; 480px&＃xff09;” href&＃61;“link.css”/>
上面使用中only可省略&＃xff0c;限定于计算机显示器&＃xff0c;第一个条件max-width是指渲染界面最大宽度&＃xff0c;第二个条件max-device-width是指设备最大宽度。&＃xff08;这意味着满足媒体查询条件语句的将会引用link.css&＃xff09;.
示例二&＃xff1a;在样式表中内嵌&＃64;media&＃xff1a;
&＃64;media &＃xff08;min-device-width:1024px&＃xff09; and &＃xff08;max-width:989px&＃xff09;&＃xff0c;screen and &＃xff08;max-device- width:480px&＃xff09;&＃xff0c;&＃xff08;max-device-width:480px&＃xff09; and &＃xff08;orientation:landscape&＃xff09;&＃xff0c;&＃xff08;min-device- width:480px&＃xff09; and &＃xff08;max-device-width:1024px&＃xff09; and &＃xff08;orientation:portrait&＃xff09; {srules}
在示例二中&＃xff0c;设置了电脑显示器分辨率&＃xff08;宽度&＃xff09;大于或等于1024px&＃xff08;并且最大可见宽度为989px&＃xff09;&＃xff1b;屏宽在480px及其以下手持设备&＃xff1b;屏宽在 480px以及横向&＃xff08;即480尺寸平行于地面&＃xff09;放置的手持设备&＃xff1b;屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。
从上面的例子可以看出&＃xff0c;字符间以空格相连&＃xff0c;选取条件包含在小括号内&＃xff0c;srules为兼容设置的样式表&＃xff0c;包含在中括号里面。only&＃xff08;限定某种设备&＃xff0c;可省略&＃xff09;&＃xff0c;and&＃xff08;逻辑与&＃xff09;&＃xff0c;not&＃xff08;排除某种设备&＃xff09;为逻辑关键字&＃xff0c;多种设备用逗号分隔&＃xff0c;这一点继承了css基本语法。
注&＃xff1a;若页面中引入多个媒体样式时&＃xff0c;有两个或以上引用有交集产生。那么按照css默认优先级规则&＃xff0c;后者将覆盖前者。
四. 浏览器支持情况及相关设置
媒体介质在CSS2中已经被添加&＃xff0c;因此主流平台的浏览器毫无疑问都可以正确支持。但是 Media Query 语句是CSS3中添加的新功能&＃xff0c;部分浏览器可能并不理解。例如IE能成功解读媒体介质&＃xff0c;但是却无法解读 and 后面的媒体查询语句&＃xff0c;就会连带媒体介质一起忽略。为了让不识别媒体查询语句的浏览器依然识别到媒体介质&＃xff0c;可以使用 only 关键字进行hack。
例&＃xff1a;
添加了 only 关键字后&＃xff0c;支持媒体查询语句的浏览器依然正常解析。但不支持媒体查询语句但正确读取媒体介质的设备&＃xff0c;由于先读取到 only 而不是 screen &＃xff0c;将忽略这个样式。不支持媒体查询的IE不论是否有 only &＃xff0c;都直接忽略样式。&＃xff08;注&＃xff1a;若使用了 not 或 only 操作符&＃xff0c;必须明确指定一个媒体类型&＃xff09;
最后是浏览器支持情况&＃xff1a;
IE8-- IE9&＃43;
- Chrome 5&＃43;
- Opera 10&＃43;
- Firefox 3.6&＃43;<
- Safari 4&＃43;
五. 经验与分享
/* 禁用iPhone中Safari的字号自动调整 */
html {-webkit-text-size-adjust&＃xff1a; none;}
/* 设置HTML5元素为块 */
article&＃xff0c; aside&＃xff0c; details&＃xff0c; figcaption&＃xff0c; figure&＃xff0c; footer&＃xff0c; header&＃xff0c; hgroup&＃xff0c; menu&＃xff0c; nav&＃xff0c; section
{display&＃xff1a; block;}
/* 设置图片视频等自适应调整 */
img {max-width&＃xff1a; 100%;height&＃xff1a; auto;width&＃xff1a; auto9; /* ie8 */}
最后要注意的是在页面的头部之间加上下面这句∶
meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明
参数设置∶
width – viewport的宽度
height – viewport的高度
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放
最后对于在IE浏览器中不支持media query的情况&＃xff0c;我们可以使用Media Query &＃xff4a;&＃xff41;&＃xff56;&＃xff41;&＃xff53;&＃xff43;&＃xff52;&＃xff49;&＃xff50;&＃xff54;来解决&＃xff0c;只需要在页面头部引用css3-mediaqueries.js即可。示例&＃xff1a;
<&＃xff01;--&＃xff3b;if lt IE 9&＃xff3d;>
<&＃xff01;&＃xff3b;endif&＃xff3d;-->
本文章部分内容查考学习自&＃xff1a;http://www.educity.cn/jianzhan/403677.html 感谢分享。
京公网安备 11010802041100号