ITPub博客

首页 > IT职业 > IT职场 > css响应式布局原理

css响应式布局原理

IT职场 作者:nanquanc 时间:2021-09-09 10:09:11 0 删除 编辑

  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>


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/1556/viewspace-2817545/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-04-15

  • 博文量
    109
  • 访问量
    854