首页 > 软件开发 > HTML >

如何创建响应式界面

来源:互联网 2023-03-16 19:15:58 477

如何创建响应式界面,响应式的界面除了HTML以外,最重要的是要用CSS来实现。因为实际生活中除了PC端,还有手机端等,那么设备的尺寸是不一样的,因此响应式的界面就变得很重要了。M9e办公区 - 实用经验教程分享!

如何创建响应式界面M9e办公区 - 实用经验教程分享!

工具/原料

  • sublime text3
  • chrome浏览器
  • windows7

方法/步骤

  • 1

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

    如何创建响应式界面M9e办公区 - 实用经验教程分享!

  • 2

    这里我们插入一张图片作为一个区域的元素。M9e办公区 - 实用经验教程分享!

    如何创建响应式界面M9e办公区 - 实用经验教程分享!

    如何创建响应式界面M9e办公区 - 实用经验教程分享!

  • 3

    创建CSS文档,并且关联现在的HTML文档。M9e办公区 - 实用经验教程分享!

    如何创建响应式界面M9e办公区 - 实用经验教程分享!

  • 4

    我们设置一下图片的尺寸和位置。M9e办公区 - 实用经验教程分享!

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

    如何创建响应式界面M9e办公区 - 实用经验教程分享!

    如何创建响应式界面M9e办公区 - 实用经验教程分享!

  • 5

    我们要现在HTML里面加上这句。M9e办公区 - 实用经验教程分享!

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

    然后我们加上缩小后的变化。M9e办公区 - 实用经验教程分享!

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

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

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

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

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

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

    如何创建响应式界面M9e办公区 - 实用经验教程分享!

    如何创建响应式界面M9e办公区 - 实用经验教程分享!

  • 5相关内容未经许可获取自百度经验
  • 6

    这个时候我们把浏览器缩小,响应式的效果就出来了。M9e办公区 - 实用经验教程分享!

    如何创建响应式界面M9e办公区 - 实用经验教程分享!

    如何创建响应式界面M9e办公区 - 实用经验教程分享!

  • 注意事项

    • @media的格式一定不能错

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


    标签: HTMLCSS

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