首页 > 软件开发 > HTML >

css 如何使页面缩小后不变

来源:互联网 2023-03-16 19:16:12 89

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

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

工具/原料

  • windows 7
  • sublime text3
  • IE6

方法/步骤

  • 1

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

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

  • 2

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

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

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

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

  • 3

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

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

  • 4

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

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

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

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

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

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

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

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

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

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

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

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

  • 5

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

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

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

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

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

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

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

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

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

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

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

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

  • 注意事项

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

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


    标签: CSSHTML

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