移动端响应
需要在meta中,设置content=“width=750,user-scalable = no” ,这样就能控制不管在那种机型中,都能控制物理分辨率为750px
多端响应
利用媒体查询 @media screen
使用媒体查询时,必须加上meta viewport标签
demo示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1.user-scalable=no">
<title>Document</title>
<style>
.d1 {
width: 25%;
height: 200px;
background: skyblue;
}
/* 媒体查询 */
/* 移动端设定 */
/* 设定小于600像素的时候的样式 */
@media only screen and (max-width:600px) {
.d1 {
width: 100%;
background: red;
}
}
/* PC端设定 */
/* 设定大于1200像素的样式 */
@media only screen and (min-width:1200px) {
.d1 {
width: 33%;
background: yellowgreen;
}
}
/* 平板设定 */
/* 设定600-1200像素的样式 */
@media only screen and (min-width:600px) and (max-width: 1200px) {
.d1 {
width: 50%;
background: goldenrod;
}
}
/* 使用媒体查询必须加上meta viewport标签 */
</style>
</head>
<body>
<div class="d1">
</div>
</body>
</html>