在我们开发的过程中, 使用响应式页面是, 可能有时候需要PC端和移动端的样式不一样,这个时候如果用JS的方式 简单的还可以.多的话就显得很臃肿 要加很多判断 响应速度大大降低.这个时候 我们可以使用 CSS3中的 @media属性,
我们先创建一个html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="media.css">
</head>
<body>
<div class="divs">
你好啊
</div>
</body>
</html>然后引入主样式表 index.css
.divs{
width:100px;
height:100px;
background:red;
}然后再创建移动端响应式样式表 media.css @media
@media (max-width: 1105px) {
.divs{
width:100px;
height:100px;
background:none;
}
}这里 @media括号内的为响应规范, 表示 如果页面的宽度小于 1105px 就使用 media.css 这一套样式表
反之, 如果大于 1105px 则使用 index.css 样式表
也可以这样写
@media (min-width: 768px) and (max-width: 991px) {
//样式内容
}
扫一扫
768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
