您的位置：首页 > 产品设计 > UI/UE

css3 响应式布局 Media Query

2016-10-11 09:14 295 查看

1.什么是响应式布局？

　　响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简单说就是一个网站能够兼容多个终端。

2.响应式布局的优缺点？

　　优点：面对不同分辨率设备灵活性强，快捷解决多设备显示适应问题

　　缺点：工作量大；会出现隐藏多个无用元素加载时间延长；一定程度上改变了网站原有的布局结构

在页面的<head>标签中加入这句：

<meta name="viewport" content="width=device-width; initial-scale=1.0">

meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。

参数设置：

width(viewport的宽度)

height(viewport的高度)

initial-scale(初始的缩放比例)

maximum-scale(允许用户缩放的最大比例)

minmum-scale(允许用户缩放的最小比例)

user-scalable(用户是否可以手动缩放)

3.用法

　　<link rel="stylesheet" type="text/css" media="only screen and (max-width:480px), only screen and (max-device-width: 480px)" href="small.css"/>

　　可用设备名参数：

类型	解释
screen	彩色电脑屏幕
all	所有设备
braille	盲文
embossed	盲文打印
handheld	手持设备
print	文档打印或打印预览模式
projection	项目演示，比如幻灯片
speech	演讲
tty	固定字母间距的网格的媒体，如电传打字机
tv	电视

　　逻辑关键字：

关键字	说明
only	限定某种设备类型
and	逻辑与，连接设备名和选择条件
not	排除某种设备
,	设备列表

　　可用设备名参数：

媒体特性	值	可用媒体类型	接受min／max	简介
width	<length>	屏幕／触摸设备	yes	定义输出设备中的页面可见区域宽度（单位一般是px）
height	<length>	屏幕／触摸设备	yes	定义输出设备中的页面可见区域高度（单位一般是px）
device-width	<length>	屏幕／触摸设备	yes	定义输出设备的屏幕可见宽度（单位一般是px）
device-height	<length>	屏幕／触摸设备	yes	定义输出设备的屏幕可见高度（单位一般是px）
orientation	portrait\|landscape	位图介质类型	no	定义'height'是否大于或等于'width'。值就为portrait，即横向。否则为landscape，为竖屏
aspect-ratio	<ratio>	位图介质类型	yes	定义浏览器的长宽比
device-aspect-ratio	<ratio>	位图介质类型	yes	定义设备屏幕长宽比，如常见的显示器比率：4/3，16/9，16/10
color	<integer>	视觉媒体	yes	定义每一组输出设备的彩色元件个数。如果不是彩色设备，则值等于0
color-index	<integer>	视觉媒体	yes	定义在输出设备的彩色查询表中的条目数，如果没有使用彩色查询表，则值等于0
monochrome	<integer>	视觉媒体	yes	定义在一个单色框架缓冲区中每像素包含的单色元件个数，如果不是单色设备，则值等于0
resolution	<resolution>	位图介质类型	yes	定义设备的分辨率。如：96dpi，300dpi，118dpcm
scan	progressive｜interlace	电视类	no	定义电视类设备的扫描工序，progressive逐行扫描，interlace隔行扫描
grid	<integer>	栅格设备	no	Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1. Otherwise it is zero. 用来查询输出设备是栅格设备还是位图设备，如果是栅格设备为1，否则值为0。

测试工具：

　　一个在线工具－Responsivator，可以模拟iphone、ipad和少量android设备。

实现举例：

　　/*浏览器的可视区域小于980px*/

　　@media screen and (max-width: 980px) {

　　#wrap {width: 90%; margin: 0 auto;}

　　#content {width: 60%; padding: 5%;}

　　#sidebar {width: 30%;}

　　#footer {padding: 8% 5%; margin-botton: 10px;}

　　}

　　/*浏览器的可视区域小于650px*/

　　@media screen and (max-width:650px) {......}

格式化一些css属性的初始值：

/*禁止iphone中safari的字号自动调整*/

html {

-webkit-text-size-adjust: none;

}

/*设置html5元素为块*/

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

diplay: block;

}

/*设置图片视频等自适应调整*/

img {

max-width: 100%;

height: auto;

width: auto\9; /*ie8*/

}

.video embed, .video object, .video iframe {

width: 100%;

height: auto;

}

对于ie浏览器不支持media query的情况，我们可以使用Media Query JavaScript来解决，只需要在页面头部引用css3-mediaqueries.js即可。

例如：



<! [endif] -->

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航