使用Media Query (媒介查詢)來實現(xiàn)響應式布局。
- CSS中的Media Query
設(shè)備寬高： device-width, device-height
渲染窗口的寬和高： width, height
設(shè)備的手持方向： orientation
設(shè)備的分辨率： resolution - 使用方法
外聯(lián)
內(nèi)嵌樣式
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;
}
