对于移动端页面,有两种实现方案:
1, 网站PC端页面和移动端页面完全分开做,根据用户的访问设备类型,给用户返回不同的页面(目前国内大多数网站采用的都是此方案)。
媒体查询,响应式布局
1, 网站PC端页面和移动端页面完全分开做,根据用户的访问设备类型,给用户返回不同的页面(目前国内大多数网站采用的都是此方案)。
2,响应式页面布局,页面本身能够根据浏览器窗口的宽度进行不同的布局,在宽屏幕上显示一种布局,在移动端窄屏幕上显示另一种布局。
分开做就是做两个完全不相同的页面,所以记一下媒体查询
媒体查询,响应式布局
像bootstrap这种框架都会有响应式布局的引入,但个人感觉有点不合胃口,所以还是自己写比较好
媒体查询是响应式页面的基础
@media,设置媒体查询,设置一些样式仅在某些条件下生效
下面这段代码的max-width:900px是网页宽度小于900px时,不是前面有max就是大于
@media (max-width:900px){
}
Tips:媒体查询代码是遵循css优先级的,所以要放在css代码的最下面(个人觉得),css优先级具体看另一篇博客:css优先级
下面贴一个效果直观一点的代码,鼠标拉伸网页宽度,在网页宽度小于900时一个效果,小于600时另一个效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
margin: 0;
}
/*给main设置宽高,居中,弹性布局,为了直观的看到效果,不用在意*/
main{
width: 900px;
margin: 0 auto;
background-color: yellow;
display: flex;
flex-wrap: wrap;
}
/*给div设置25%宽度,主要看box排列效果*/
.box{
width: 25%;
height: 50px;
border: 1px solid #000;
box-sizing: border-box;
}
/* @media,设置媒体查询,设置一些样式仅在某些条件下生效 */
/* max-width:900px:当窗口宽度小于900px时 */
/* 媒体查询是响应式页面的基础 */
@media (max-width:900px){
.box{
width: 33.3%;
}
main{
width: 600px;
}
}
@media(max-width:600px){
.box{
width: 50%;
}
main{
width: 3m00px;
}
}
</style>
</head>
<body>
<main>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
</main>
</body>
</html>