使用Media Query (媒介查询)来实现响应式布局。
- CSS中的Media Query
设备宽高： device-width, device-height
渲染窗口的宽和高： width, height
设备的手持方向： orientation
设备的分辨率： resolution - 使用方法
外联
内嵌样式
3、简单举例：
index.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="style.css" type="text/css" rel="stylesheet" media="only screen and (max-width:640px)">
<style>
@media screen and (min-width: 640px) {
body{
background-color: coral;
}
}
</style>
</head>
<body>
</body>
</html>
style.css:
*{
margin: 0px;
padding: 0px;
}
body{
background-color: aqua;
}
网友评论