首页 > 软件开发 > HTML >

css 如何使页面缩小后不变

来源:互联网 2023-03-16 19:16:12 版权归原作者所有,如有侵权,请联系我们

css 如何使页面缩小后不变。以前很多人在电脑里面浏览页面,现在移动时代来了,有很多人用手机浏览页面,但是电脑和手机的页面大小完全不同的,因此我们需要在css里面加入的特定代码告知浏览器。BJn办公区 - 实用经验教程分享!

css 如何使页面缩小后不变BJn办公区 - 实用经验教程分享!

工具/原料

  • windows 7
  • sublime text3
  • IE6

方法/步骤

  • 1

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

    css 如何使页面缩小后不变BJn办公区 - 实用经验教程分享!

  • 2

    我们用img标签嵌入一张图片,我们可以看出如果页面缩小,图片不会随着缩小,这样页面就变形了。BJn办公区 - 实用经验教程分享!

    css 如何使页面缩小后不变BJn办公区 - 实用经验教程分享!

    css 如何使页面缩小后不变BJn办公区 - 实用经验教程分享!

    css 如何使页面缩小后不变BJn办公区 - 实用经验教程分享!

  • 3

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

    css 如何使页面缩小后不变BJn办公区 - 实用经验教程分享!

  • 4

    * {BJn办公区 - 实用经验教程分享!

    text-align: center;BJn办公区 - 实用经验教程分享!

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

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

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

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

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

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

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

    为了方便显示,我们先居中图片,并且设置基础的长宽。BJn办公区 - 实用经验教程分享!

    css 如何使页面缩小后不变BJn办公区 - 实用经验教程分享!

    css 如何使页面缩小后不变BJn办公区 - 实用经验教程分享!

  • 5

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

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

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

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

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

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

    现在我们在CSS文件后面加上这行代码,指的是页面缩小到宽度为600px后,图片的长宽也跟着缩小,这里要注意比例。BJn办公区 - 实用经验教程分享!

    css 如何使页面缩小后不变BJn办公区 - 实用经验教程分享!

  • 5本页面未经授权抓取自百度经验
  • 6

    然后我们试着缩小页面,就可以发现会跟着缩小,这样就可以制作不变的效果。BJn办公区 - 实用经验教程分享!

    css 如何使页面缩小后不变BJn办公区 - 实用经验教程分享!

    css 如何使页面缩小后不变BJn办公区 - 实用经验教程分享!

  • 注意事项

    • 单位除了用PX,也可以用百分号

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


    标签: CSSHTML

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