【web前端自动化工作环境配置】1.网页屏幕自适应问题

最新推荐文章于 2024-12-31 08:47:04 发布

Anabel Chen

最新推荐文章于 2024-12-31 08:47:04 发布

阅读量1.1k

点赞数

分类专栏：【Web前端】文章标签： html 浏览器

本文链接：https://blog.csdn.net/benben513624/article/details/50826502

版权

【Web前端】专栏收录该内容

23 篇文章 2 订阅

订阅专栏

最近一段时间学做网页，遇到了网页屏幕适配的问题，做的网页不能随着屏幕的缩小而缩小，浏览器缩小，网页就会显示不全，为了解决这个问题，自己也琢磨了几天，也算有了结果，自己也做了如下总结：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>屏幕自适应</title>
    <style type="text/css">
        .img1 { width:80%;}
    </style>
</head>
<body>
<div style="width:60%;  margin:auto auto;text-align: center ">
    <img Class="img1" src="images/logo.png" />
</div>
</body>
</html>

这一种问题称为屏幕自适应问题，就是内容能随着屏幕的大小而变大变小，在设置宽度的时候就用百分比，div的属性width:60%;是这个div占屏幕宽度的60%，margin:auto auto;是居中的意思，text-align:center;是div里面的内容是居中显示的，img1的属性width:80%是这个图片占父div的宽度。