CSS3 Media Queries实现响应式布局

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

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

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

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

页面效果：

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

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcUAAADFCAIAAACq1H5nAAAL4klEQVR4nO2cPU8jyRZA+1f5DzhA4i8gCGc0IUgvcQIBEk4cIFbehAmGBJJZ7TbSDJJDJw5WskU00kqQPJEQTLwveoG/+qOq3eZefG9Pn6OjFRi7sbaoM9XltpP/AQCABon1EwAA+EWgpwAAOtBTAAAd6CkAgA70FABAB3oKAKADPQUA0MF7T7/+eEHElmjdGyn0FBG9aN0bKfQUEb1o3Rsp9BQRvWjdGyn0FBG9aN0bKfQUEb1o3Rsp9BQRvWjdGyn0FBG9aN0bKfQUEb1o3Rsp9BQRvWjdGyn0FBG9aN0bKfQUEb1o3Rsp9BR1vDhJkiRJusPrerdXeD3YS5IkSfaOxyrP7f4gSZIkObiz/7+E1Vr3Rgo9RR0vTooFvB7sJd3hce722XF3c9fmPe0MZusb73rFIN71kvqc3JefHjrUujdS6CnqmAnW7Li7WJNeDIYHJ+W8Zbo2Hna26OKmIM4ju81aGF1p3Rsp9BR1nPf04GSvM5jNz/Hny8ncwnDeu5P76kMF1qc/XuqsbVmENl3r3kihpyhxuRRd0e0ddPc63do9veslSe8if9hIT+8PAje+ZNo9O+4WYr3YOS0/Cn1q3Rsp9BR1LK1JF6f8x+Xz/UzyLgK7AYt1buycvxDH5YtXSZIknW7kUZtWxOhE695IoaeoY7mnm9eni83T7Bn6YkVZ2gO9Pwjc+PK1uJidr5dXC9750YrrX3SrdW+k0FPUcdHQwbCT9A6qe7rM4mJxWsxroYZJcnJ/PdiLZTHU09WvoKcN07o3Uugp6rg8c987Hpc2VQuUl5mrV/lXP1otXQe96tfrgz1dvmxFTxumdW+k0FOUmt3BXL8utFyTZs/9v971wq+/L9ate7lrp+YXjW53MUDh0n162jCteyOFnqLA1bpyccF84Hqm1e0V5+ylAy6bu746NfrAUE9XyaanDdO6N1LoKeq47mnhnUvL1EZP9ueWT/kXLndRI28YzfU0vANLTxujdW+k0FPUsbQ+zV0NutgTCMd0XcwgncH9fFc0eBnp/PfOf7T4LestgvAlq+hW695IoaeoY+B8f3V1VOC6qJzzDq4f+8a3jS5O9rPXrvIZKM3SujdS6CnqGNw/zbxUteltoJmt2FVPV+8FqLHGXF5UEHyzAO/ob4jWvZFCT1HHYE+zO6cVS8VldnsXd72kO7zOr0/XUY5mcX2lavFH681cdlEboHVvpNBTFJrb/VxFcxXBzBVUWYqv4HcGs+JGaraeubtlf/vqyPFcLh/Lub9/rXsjhZ6ihuNhJ0k6g2E2iIGT9MVqcd6+wnuZcocK7Q/cH2RuzKx8+UCpX0fr3kihp4joReveSKGniOhF695IoaeI6EXr3kihp4joReveSKGniOhF695IoaeI6EXr3kihp4joReveSKGniOhF695IoaeI6EXr3kihp4joReveSKGniOhF695IoaeI6EXr3kihp4joReveSPHe08e//0bElmjdGynee2r+DyYi7kzr3kihp4joReveSKGniOhF695IoaeI6EXr3kihp4joReveSKGniOhF695IoaeI6EXr3kihp4joReveSKGniOhF695IoaeI6EXr3khpUU9vps9n6eRwmO73b3E3Hv2enqWTm+kzw+TZNwwTPQ3Slp7eTJ8/fn64HE3HT6///PwXd+P46fVyNP1w/b3mXGWYGjFM9DRGW3p6lk4uR1PzP9x2ejWanaYThsm59YeJnsZoS0+PhilLHivHT6+Hw5Rhcm79YaKnMdrS0/3+rfnfa5vd798yTP6tOUz0NAY9RUcTlWFqxDDR0xj0FB1NVIapEcNET2PQU3Q0URmmRgwTPY1BT9HRRGWYGjFM9DQGPUVHE5VhasQw0dMY9BQdTVSGqRHDRE9j0FN0NFEZpkYMEz2NQU/R0URlmBoxTPQ0Bj3dgY/n/dv9/sO3n4/n/dtPf/03f+O/pW8LPwoeqs6vs5+f205UetqIYaKnMejpe/t43r89n6z/++mv8errSE/L3+aOtkpz/lOCNj62AROVnjZimOhpDHr6rubyF+ppLI7BVpZDGUxnxdHMIktPK4fMi/RUCD3d2RQqmlmibnUWX70zsHFh63qitqCnrqWnQujpe1uRvPkXf/5nw0I1m87qU/vH/Mo3e396imrDRE9j0NN3NXxSn91O3TJ2dbZZgwtYeiofxOA/b/lvf/vjU9W/goVHuZOeCqGnu5mNgeSFelqxPg0eip6ajGN87+W38STw05oXb9hLT4XQ053Nw0wrvzxsvz6tWCVtfD2KnmoNYnBM6Sk9XUBPdzYVM2vSL4+V6536L8pvXJ9mb6Gn8kEMjCk9pacr6OnOpmLuxaL89aexherGMtbsafXtjiaqy57W2T+N3TO2f+o0qfRUCD3dzWzM9TT+elSd1/e32j+tc7ujieqyp4p/A+bPRGeY6GkMerqbuRRcVFafGFbMw9gV+4UHVt/H40T9FXvqfU36hmGipzHoKTqaqAxTI4aJnsagp+hoojJMjRgmehqDnqKjicowNWKY6GkMeoqOJirD1Ihhoqcx6Ck6mqgMUyOGiZ7GoKfoaKIyTI0YJnoag56io4nKMDVimOhpjLb09GiYjp9ezf9e2+n46fVwmDJMzq0/TPQ0Rlt6epZOLkdT8z/Zdno1mp2mE4bJufWHiZ7GaEtPb6bPHz8/XI1mLH926fjp9Wo0+3D9/Wb6zDC5ddthoqcx2tLT+Vw9TSeHwzTyRkzU92iYnqaTrWYpw9SIYaKnQVrUU0R0rnVvpNBTRPSidW+k0FNE9KJ1b6TQU0T0onVvpNBTRPSidW+k0FNE9KJ1b6S0qKc30+czLsTZ8YU4v6dnPi7EwUZo3Rspbenp/ELxy9GUC8V3fKH45Wjq4UJxbITWvZHSlp7yRkZDPbyRERuhdW+ktKWnfNCGoR4+aAMboXVvpLSlp/t8EJyp+9YfBIeN0Lo3Uugp0lP0onVvpNBTpKfoReveSKGnSE/Ri9a9kUJPkZ6iF617I4WeIj1FL1r3Rgo9RXqKXrTujRR6ivQUvWjdGyn0FOkpetG6N1LoKdJT9KJ1b6TQU6Sn6EXr3kihpyY+nvdv9/sP3zwejZ6imda9kUJPW+tOK0xPsY7WvZFCT1srPUV3WvdGCj2VxOh2v397Pll9/fDtZ/br4j0j94neIX/kwtHedkvwl8aeBj3FXWvdGyn0VJbUL4+ZhV75i9hiMPZt4YvYQSqOVvFkaj4H3f9L9BS30Lo3UuipsKcPpZaVl3j181pR5K16Wl7tlkMZe1bvUlV6inW07o0UeipOamBtWLNc79fTit/15tvpKb671r2RQk/lPQ0u8TZvj8Z3M8t3iBW8os7Vu6Xlo7F/ivZa90YKPdXtqclxuP4UfxGteyOFnkoSphjTNxztzQ+kp+hU695IoadIT9GL1r2RQk+RnqIXrXsjhZ4iPUUvWvdGCj1FeopetO6NFHqK9BS9aN0bKfQU6Sl60bo3Uugp0lP0onVvpLSlp0fDdPz0ap6Vdjp+ej0cpuZzFf1r3RspbenpWTq5HE3Ny9JOr0az03RiPlfRv9a9kdKWnt5Mnz9+frgazVil7tLx0+vVaPbh+vvN9Nl8rqJ/rXsjpS09/frj5Wb6fJpODofpfu6DP/AdPRqmp+mEmGJNrXsjpUU9RUTnWvdGCj1FRC9a90YKPUVEL1r3Rgo9RUQvWvdGCj1FRC9a90YKPUVEL1r3Ror3ngIANAV6CgCgAz0FANCBngIA6EBPAQB0oKcAADrQUwAAHegpAIAO9BQAQAd6CgCgAz0FANCBngIA6EBPAQB0oKcAADrQUwAAHegpAIAO9BQAQAd6CgCgAz0FANCBngIA6EBPAQB0oKcAADrQUwAAHegpAIAO9BQAQAd6CgCgAz0FANCBngIA6EBPAQB0oKcAADrQUwAAHegpAIAO9BQAQAd6CgCgAz0FANCBngIA6EBPAQB0oKcAADrQUwAAHegpAIAO9BQAQAd6CgCgAz0FANCBngIA6EBPAQB0oKcAADrQUwAAHegpAIAO9BQAQAd6CgCgAz0FANDh/8s+9qQTvVu2AAAAAElFTkSuQmCC" alt="" />aaarticlea/png;base64,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" alt="" width="542" height="196" />

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