CSS3 Media Queries实现响应式布局

最新推荐文章于 2021-08-04 02:45:50 发布

qiupu4667

最新推荐文章于 2021-08-04 02:45:50 发布

阅读量554

点赞数

本文链接：https://blog.csdn.net/qiupu4667/article/details/70232085

版权

概念我就不在这里写啦。大家可以看看以下网页：

http://www.runoob.com/cssref/css3-pr-mediaquery.html

http://www.w3cplus.com/content/css3-media-queries

以下是我做的一个小例子：

页面效果：

当页面宽度在320px到550px之间时：当页面宽度大于551px时

1.html代码：

<template>
<div class="home">
  <div class="home-body">
  <div class="title"><h1>搜索页</h1></div>
  <div class="head-home">
    <template v-for='(index,project) in projectData'>
      <div class="project " v-if='index>=projectData.length-3' v-on:click='searchProject(index)'>{{project.projectName}}</div>
    </template>
  </div>
</div>
</div>
</template>

2.style

<style scoped>
@media only screen and (min-width: 320px) and (max-width: 550px){
.home-body{
  width:28em;
  margin: 1% auto;
  background-color:lightblue;
}
.project{
    height: 3em;
    line-height: 3em;
    width: 10.75em;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    background-color: #DBEFF9;
    border: 1px solid #4A88A7;
    color: #4A88A7;
    float: left;
    margin: 0 1em 0.5em 0;
}
.head-home,.type-home,.search-home,.project-all{
  overflow: hidden;
   margin:0.5em 0 0 2em;
}
.title{
    margin: 3% 0;
    padding: 3% 0;
    text-align: center;
    border-bottom: 1px solid #D2CCCC;
}
}
@media only screen and (min-width: 551px) {
 .home-body{
  width:39em;
  margin: 1% auto;
}
.project{
    height: 3em;
    line-height: 3em;
    width: 10.75em;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    background-color: #DBEFF9;
    border: 1px solid #4A88A7;
    color: #4A88A7;
    float: left;
    margin: 0 1em 0.5em 0;
}
.head-home,.type-home,.search-home,.project-all{
  overflow: hidden;
   margin:0.5em 0 0 2em;
}
.title{
    margin: 3% 0;
    padding: 3% 0;
    text-align: center;
    border-bottom: 1px solid #D2CCCC;
}
}
</style>