为了账号安全,请及时绑定邮箱和手机立即绑定

css响应式布局原理

标签:
Html/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>


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消