手记

css响应式布局原理

  1. 移动设备优先:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  2. 媒体标签:

    @media screen and (min-width: 100px){    div{        width: 100px;        height: 1000px;        background: yellow;    }}
  3. 完整代码:

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><style>@media screen and (min-width: 100px){    div{        width: 100px;        height: 1000px;        background: yellow;    }}@media screen and (min-width: 500px){    div{        width: 500px;        height: 1000px;        background: blue;    }}@media screen and (min-width: 800px){    div{        width: 800px;        height: 1000px;        background: black;    }}</style></head><body><div></div></body></html>


0人推荐
随时随地看视频
慕课网APP