首页 > 软件开发 > HTML >

media queries怎么使用

来源:互联网 2023-03-16 19:16:07 114

media queries怎么使用,media queries是CSS里面的语法,主要应用于手机页面上,因为手机页面和电脑页面的大小不一样,这个时候这个语法就很有用,因为这样主需要设置不需要重新开发。Ia1办公区 - 实用经验教程分享!

media queries怎么使用Ia1办公区 - 实用经验教程分享!

工具/原料

  • windows 7
  • sublime text3
  • IE6

方法/步骤

  • 1

    打开编辑器,创建一个HTML文档,并且设立一下基本的架构。Ia1办公区 - 实用经验教程分享!

    media queries怎么使用Ia1办公区 - 实用经验教程分享!

  • 2

    然后插入一张图片作为一个区域的元素。这里用DIV和IMG标签。Ia1办公区 - 实用经验教程分享!

    media queries怎么使用Ia1办公区 - 实用经验教程分享!

    media queries怎么使用Ia1办公区 - 实用经验教程分享!

  • 3

    然后创建CSS文档,并且关联现在的HTML文档。利用LINK标签。Ia1办公区 - 实用经验教程分享!

    media queries怎么使用Ia1办公区 - 实用经验教程分享!

  • 4

    在CSS文件里面设置一下图片的尺寸和位置。Ia1办公区 - 实用经验教程分享!

    但是如果在手机上显示,这个图片就太大了。Ia1办公区 - 实用经验教程分享!

    media queries怎么使用Ia1办公区 - 实用经验教程分享!

    media queries怎么使用Ia1办公区 - 实用经验教程分享!

  • 5

    先在HTML文件里面加上这句。Ia1办公区 - 实用经验教程分享!

    meta name="viewport" content="width=device-width, initial-scale=1.0">Ia1办公区 - 实用经验教程分享!

    然后我们在CSS文件上加上这句。Ia1办公区 - 实用经验教程分享!

    @media only screen and (max-width: 700px) {Ia1办公区 - 实用经验教程分享!

    img {Ia1办公区 - 实用经验教程分享!

    width: 600px;Ia1办公区 - 实用经验教程分享!

    height: 600px;Ia1办公区 - 实用经验教程分享!

    }Ia1办公区 - 实用经验教程分享!

    }Ia1办公区 - 实用经验教程分享!

    media queries怎么使用Ia1办公区 - 实用经验教程分享!

    media queries怎么使用Ia1办公区 - 实用经验教程分享!

  • 5此文章未经许可获取自百度经验
  • 6

    这个时候我们把页面方法缩小一下就能看到效果了。Ia1办公区 - 实用经验教程分享!

    media queries怎么使用Ia1办公区 - 实用经验教程分享!

    media queries怎么使用Ia1办公区 - 实用经验教程分享!

  • 注意事项

    • 如果max-width和min-width的区别

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!Ia1办公区 - 实用经验教程分享!


    标签: CSSHTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码