定义: 使一个网站能兼容多个终端—而不是为每个终端做一个特定的版本。这个概念是为了解决移动互联网浏览而诞生的。
为什么需要: 响应式布局可以为不同的终端的用户提供更加舒适的页面和更好的用户体验。随着目前大屏幕移动设备的普及，可以用“大势所趋”来形容。
媒体查询:
1.通过不同的媒介类型和条件定义样式表规则。
2.媒介查询让CSS可以更精确作用域不同的媒介类型和同一媒介的不同条件。
3.媒介查询的大部分媒介特性都接收min和max用于表达：大于或等于和小于或等于
4.语法
4.1在link中使用@media,如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/link1.css" media="screen and (max-width:500px)">
<link rel="stylesheet" href="css/link2.css" media="screen and (max-width:1000px) and (min-width:500px)">
<link rel="stylesheet" href="css/link3.css" media="screen and (min-width:1000px)">
<title></title>
</head>
<body>
<div class="main"></div>
<body>
<html>
意思是
当main这个div的宽度在500px以下时调用css中的link1.css
当main这个div的宽度在500px到1000px之间时调用css中的link2.css
当main这个div的宽度在1000px以上时调用css中的link3.css
4.2在样式表中内嵌@media 如下图
网友评论